NodeList

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

NodeList Objekte sind Sammlungen von Knoten, die normalerweise von Eigenschaften wie Node.childNodes und Methoden wie document.querySelectorAll() zurückgegeben werden.

Dieses Interface war ein Versuch, eine unveränderbare Liste zu erstellen und wird nur weiterhin unterstützt, um existierenden Code nicht zu brechen, der es bereits verwendet. Moderne APIs repräsentieren Listenstrukturen mithilfe von Typen, die auf JavaScript Arrays basieren, wodurch viele Array-Methoden verfügbar werden und gleichzeitig zusätzliche Semantiken für deren Nutzung auferlegt werden (wie beispielsweise, dass ihre Elemente schreibgeschützt sind).

Diese historischen Gründe bedeuten nicht, dass Sie als Entwickler NodeList vermeiden sollten. Sie erstellen NodeList Objekte nicht selbst, sondern erhalten sie von APIs wie Document.querySelectorAll(), und diese APIs sind nicht veraltet. Seien Sie jedoch vorsichtig mit den semantischen Unterschieden zu einem echten Array.

Obwohl NodeList kein Array ist, ist es möglich, sie mit forEach() zu durchlaufen. Sie kann auch mithilfe von Array.from() in ein echtes Array umgewandelt werden.

Live vs. Statische NodeLists

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

Live NodeLists

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"

Statische NodeLists

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.

Instanz-Eigenschaften

NodeList.length Nur lesbar: Die Anzahl der Knoten in der NodeList.

Instanz-Methoden

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.

Beispiel

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().

Spezifikationen

Specification
DOM Standard # interface-nodelist

Browser-Kompatibilität

BCD tables only load in the browser