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 Nodes, die normalerweise durch Eigenschaften wie Node.childNodes und Methoden wie document.querySelectorAll() zurückgegeben werden.

Diese Schnittstelle war ein Versuch, eine nicht modifizierbare Liste zu erstellen und wird nur weiterhin unterstützt, um existierenden Code nicht zu brechen, der sie bereits verwendet. Moderne APIs repräsentieren Listenstrukturen mit Typen, die auf JavaScript-Arrays basieren, und bieten so viele Array-Methoden an, während sie gleichzeitig zusätzliche Semantiken in ihrer Nutzung auferlegen (wie z.B. das Festlegen, 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. Achten Sie jedoch auf die semantischen Unterschiede im Vergleich zu einem echten Array.

Obwohl NodeList kein Array ist, ist es möglich, mit forEach() darüber zu iterieren. Es kann auch in ein echtes Array mit Array.from() umgewandelt werden.

Live vs. Statische NodeLists

Obwohl beide als NodeList-Objekte betrachtet werden, gibt es zwei Variationen 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, diesen Unterschied im Hinterkopf 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 Schreibgeschützt: Die Anzahl der Nodes in der NodeList.

Instanz-Methoden

NodeList.item()

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

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

NodeList.entries()

Gibt einen Iterator zurück, der es ermöglicht, durch alle Schlüssel/Wert-Paare in der Sammlung zu gehen. (In diesem Fall sind die Schlüssel Ganzzahlen, beginnend bei 0, und die Werte sind Nodes.)

NodeList.forEach()

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

NodeList.keys()

Gibt einen Iterator zurück, der es ermöglicht, durch alle Schlüssel der Schlüssel/Wert-Paare in der Sammlung zu gehen. (In diesem Fall sind die Schlüssel Ganzzahlen, beginnend bei 0.)

NodeList.values()

Gibt einen Iterator zurück, der es ermöglicht, durch alle Werte (Nodes) der Schlüssel/Wert-Paare in der Sammlung 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 können, wenn Ihr Skript annimmt, dass es nur mit element-Objekten umgehen muss. Zudem ist for...in nicht garantiert, die Eigenschaften in einer bestimmten Reihenfolge zu besuchen.

for...of iteriert korrekt über NodeList-Objekte:

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

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

Spezifikationen

Specification
DOM # interface-nodelist