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 üblicherweise 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 weiterhin unterstützt, um den Code nicht zu brechen, der sie bereits verwendet. Moderne APIs repräsentieren Listenstrukturen unter Verwendung von Typen basierend auf JavaScript-Arrays, wodurch viele Array-Methoden verfügbar werden und gleichzeitig zusätzliche Semantiken für ihre Nutzung auferlegt werden (wie das Festlegen ihrer Elemente als schreibgeschützt).

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, mit forEach() darüber zu iterieren. Es kann auch in ein echtes Array umgewandelt werden, indem Array.from() verwendet wird.

Live- vs. statische NodeLists

Obwohl sie beide als NodeList-Objekte betrachtet werden, gibt es zwei Varianten von NodeList: 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, diese Unterscheidung 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 Knoten in der NodeList.

Instanz-Methoden

NodeList.item()

Gibt ein Element in der Liste durch seinen Index zurück oder null, wenn der Index außerhalb der Grenzen liegt.

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

NodeList.entries()

Gibt einen Iterierer zurück, der es ermöglicht, durch alle Schlüssel/Wert-Paare in der Sammlung zu gehen. (In diesem Fall sind die Schlüssel ganze Zahlen, die bei 0 beginnen, 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 einen Iterierer 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 ganze Zahlen, die bei 0 beginnen.)

NodeList.values()

Gibt einen Iterierer zurück, der es ermöglicht, durch alle Werte (Knoten) 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 zu enumerieren, da diese auch ihre length- und item-Eigenschaften aufzählen und Fehler verursachen können, wenn Ihr Skript annimmt, dass es nur mit element-Objekten umgehen muss. Außerdem ist bei for...in nicht garantiert, dass die Eigenschaften in einer bestimmten Reihenfolge besucht werden.

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 Iteratormethode (forEach()) sowie entries(), values() und keys().

Spezifikationen

Specification
DOM # interface-nodelist