HTML DOM NodeList Referenzhandbuch

NodeList

NodeList ist eine Sammlung von Knotenobjekten, die einer Liste ähnelt (Sammlung).

Knoten in NodeList können über Index erreicht werden (beginnend bei 0).

length-EigenschaftGibt die Anzahl der Knoten in NodeList zurück.

NodeList vs. HTMLCollection

NodeList mit HTMLCollection Fast gleich.

Siehe die Anweisungen unten auf der Seite.

Wer gibt NodeList zurück?

childNodes Eigenschaft

querySelectorAll() Methode

getElementsByName() Methode

Eigenschaften und Methoden

Sie können auf NodeList die folgenden Eigenschaften und Methoden verwenden:

Name Beschreibung
entries() Gibt einen Iterator mit Schlüssel/Wert-Paaren aus der Liste zurück.
forEach() Führen Sie für jeden Knoten in der Liste eine Callback-Funktion aus.
item() Gibt den Knoten an der angegebenen Indexposition zurück.
keys() Verwenden Sie die Schlüssel aus der Liste, um den Iterator zurückzugeben.
length Gibt die Anzahl der Knoten in NodeList zurück.
values() Verwenden Sie die Werte aus der Liste, um den Iterator zurückzugeben.

Beispiel

Wählen Sie alle <p> Knoten:

const myNodeList = document.querySelectorAll("p");

Elemente in NodeList können über Indexnummern erreicht werden.

Um den zweiten <p>-Knoten zu erreichen, können Sie schreiben:

myNodeList[1]

Versuchen Sie es selbst

Beachten Sie:Der Index beginnt bei 0.

HTML DOM Node List Length

length Eigenschaften definieren die Anzahl der Knoten in der Knotenliste:

Beispiel 1

myNodelist.length

Versuchen Sie es selbst

Wenn Sie Knoten in der Knotenliste durchlaufen möchten:length Eigenschaften sind sehr nützlich:

Beispiel 2

Ändern Sie die Farbe aller <p>-Elemente im Knotenliste:

const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
  myNodelist[i].style.color = "red";
}

Versuchen Sie es selbst

Kein Array

NodeList ist kein Array!

Der NodeList sieht vielleicht wie ein Array aus, aber das ist nicht der Fall.

Sie können NodeList durchlaufen und ihre Knoten über die Indexnummer referenzieren.

Sie können jedoch keine Array-Methode wie push()、pop() oder join() auf NodeList anwenden.

Unterschied zwischen HTMLCollection und NodeList

NodeList und HTMLcollection sehr ähnlich.

Beide sind Sammlungen von Knoten (Elementen), die aus dem Dokument extrahiert wurden, und ähneln einer Liste (Sammlung). Knoten können über ihre Indexnummer erreicht werden. Der Index beginnt bei 0.

Beide haben length-Eigenschaftund gibt die Anzahl der Elemente (Sammlung) in der Liste zurück.

Eine HTMLCollection istDokumentelementSammlung.

Ein NodeList ist eineDokumentknotenSammlung von (Elementknoten, Attributknoten und Textknoten).

HTMLCollection-Elemente können über ihren Namen, ihre id oder ihre Indexnummer erreicht werden.

NodeList-Elemente können nur über ihre Indexnummer erreicht werden.

Eine HTMLCollection ist immer eineEchtzeitSammlung. Zum Beispiel: Wenn ein <li>-Element zu einer Liste im DOM hinzugefügt wird, ändert sich die Liste in der HTMLCollection auch.

Ein NodeList ist normalerweise eineStatischSammlung. Zum Beispiel: Wenn ein <li>-Element zu einer Liste im DOM hinzugefügt wird, ändert sich die Liste im NodeList nicht.

getElementsByClassName() und getElementsByTagName() Die Methode gibt einen Echtzeit HTMLCollection zurück.

querySelectorAll() Die Methode gibt einen statischen NodeList zurück.

childNodes Die Eigenschaft gibt einen Echtzeit NodeList zurück.

Echtzeit-Node-Liste

In einigen Fällen ist der NodeListEchtzeit：DOM-Änderungen aktualisieren den NodeList.

childNodes Die Methode gibt einen Echtzeit NodeList zurück.