NodeList

Live vs. Statische NodeLists

Obwohl sie beide als NodeList Objekte betrachtet werden, gibt es zwei Arten von NodeLists: live und statisch.

In den meisten Fllen ist die NodeList live, was bedeutet, dass nderungen im DOM automatisch die Sammlung aktualisieren.

Zum Beispiel ist Node.childNodes live:

const parent = document.getElementById("parent");
let childNodes = parent.childNodes;
console.log(childNodes.length); // let's assume "2"
parent.appendChild(document.createElement("div"));
console.log(childNodes.length); // outputs "3"

In anderen Fllen ist die NodeList statisch, sodass nderungen im DOM den Inhalt der Sammlung nicht beeinflussen. Die allgegenwrtige Methode document.querySelectorAll() ist die einzige API, die eine statische NodeList zurckgibt.

Es ist gut, diesen Unterschied im Kopf zu behalten, wenn Sie entscheiden, wie Sie ber die Elemente in der NodeList iterieren und ob Sie die length der Liste zwischenspeichern sollten.

Instanz-Eigenschaften

NodeList.length Schreibgeschtzt

Die Anzahl der Knoten in der NodeList.

Instanz-Methoden

NodeList.item()

Gibt ein Element in der Liste nach seinem Index zurck oder null, wenn der Index auerhalb des Bereichs liegt.

Eine Alternative zum Zugriff auf nodeList[i] (dieses gibt stattdessen undefined zurck, wenn i auerhalb des Bereichs liegt). Dies ist hauptschlich fr nicht-JavaScript DOM-Implementierungen ntzlich.

NodeList.entries()

Gibt einen Iterator zurck, der es ermglicht, dass der Code durch alle Schlssel/Wert-Paare in der Sammlung iterieren kann. (In diesem Fall sind die Schlssel Ganzzahlen ab 0 und die Werte sind Nodes.)

NodeList.forEach()

Fhrt eine bereitgestellte Funktion einmal pro NodeList-Element aus und bergibt das Element als Argument an die Funktion.

NodeList.keys()

Gibt einen Iterator zurck, der es ermglicht, dass der Code durch alle Schlssel der Schlssel/Wert-Paare in der Sammlung iterieren kann. (In diesem Fall sind die Schlssel Ganzzahlen ab 0.)

NodeList.values()

Gibt einen Iterator zurck, der es ermglicht, dass der Code durch alle Werte (Nodes) der Schlssel/Wert-Paare in der Sammlung iterieren kann.

Beispiel

Es ist mglich, ber die Elemente in einer NodeList mit einer for-Schleife zu iterieren:

for (let i = 0; i < myNodeList.length; i++) {
  let item = myNodeList[i];
}

Verwenden Sie nicht for...in, um die Elemente in NodeLists aufzulisten, da sie auch ihre length- und item-Eigenschaften auflisten und Fehler verursachen knnen, wenn Ihr Skript davon ausgeht, dass es nur mit element Objekten umgehen muss. Auerdem ist for...in nicht garantiert, die Eigenschaften in einer bestimmten Reihenfolge zu besuchen.

for...of schleifen ber NodeList Objekte korrekt:

const list = document.querySelectorAll("input[type=checkbox]");
for (const checkbox of list) {
  checkbox.checked = true;
}

Browser untersttzen auch die Iterator-Methode (forEach()) sowie entries(), values() und keys().

Spezifikationen

Browser-Kompatibilitt