NodeList

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

In einigen Fällen ist die NodeList live, was bedeutet, dass Änderungen im DOM die Sammlung automatisch 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 Fällen ist die NodeList statisch, wobei Änderungen im DOM den Inhalt der Sammlung nicht beeinflussen. Die allgegenwärtige Methode document.querySelectorAll() gibt eine statische NodeList zurück.

Es ist gut, sich diesen Unterschied bewusst zu sein, wenn Sie entscheiden, wie Sie über die Elemente in der NodeList iterieren und ob Sie die length der Liste zwischenspeichern sollten.

NodeList.length Nur lesbar

Die Anzahl der Knoten in der NodeList.

NodeList.item()

Gibt ein Element aus der Liste anhand seines Indexes zurück oder null, wenn der Index außerhalb des Bereichs liegt.

Eine Alternative zum Zugriff auf nodeList[i] (das stattdessen undefined zurückgibt, wenn i außerhalb des Bereichs liegt). Dies ist hauptsächlich nützlich für nicht-JavaScript DOM-Implementierungen.

NodeList.entries()

Gibt ein iterator zurück, das es ermöglicht, durch alle Schlüssel/Wert-Paare in der Sammlung zu gehen. (In diesem Fall starten die Schlüssel mit 0 und die Werte sind Knoten.)

NodeList.forEach()

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

NodeList.keys()

Gibt ein iterator zurück, das es ermöglicht, durch alle Schlüssel der in der Sammlung enthaltenen Schlüssel/Wert-Paare zu gehen. (In diesem Fall sind die Schlüssel ganze Zahlen, beginnend mit 0.)

NodeList.values()

Gibt ein iterator zurück, das es ermöglicht, durch alle Werte (Knoten) der in der Sammlung enthaltenen Schlüssel/Wert-Paare zu gehen.

Es ist möglich, ü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, wenn Ihr Skript annimmt, dass es nur mit [Element]-Objekten (/de/docs/Web/API/Element) arbeiten muss. Außerdem garantiert for...in nicht, die Eigenschaften in einer bestimmten Reihenfolge zu durchlaufen.

for...of-Schleifen durchlaufen NodeList-Objekte korrekt:

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

Browser unterstützen auch die Iteratormethode (forEach()) sowie entries(), values() und keys().