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 Fällen 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 Fällen ist die NodeList statisch, sodass Änderungen im DOM den Inhalt der Sammlung nicht beeinflussen. Die allgegenwärtige Methode document.querySelectorAll() ist die einzige API, die eine statische NodeList zurückgibt.

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 Schreibgeschützt

Die Anzahl der Knoten in der NodeList.

Instanz-Methoden

NodeList.item()

Gibt ein Element in der Liste nach seinem Index zurück oder null, wenn der Index außerhalb des Bereichs liegt.

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

NodeList.entries()

Gibt einen Iterator zurück, der es ermöglicht, dass der Code durch alle Schlüssel/Wert-Paare in der Sammlung iterieren kann. (In diesem Fall sind die Schlüssel Ganzzahlen ab 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, dass der Code durch alle Schlüssel der Schlüssel/Wert-Paare in der Sammlung iterieren kann. (In diesem Fall sind die Schlüssel Ganzzahlen ab 0.)

NodeList.values()

Gibt einen Iterator zurück, der es ermöglicht, dass der Code durch alle Werte (Nodes) der Schlüssel/Wert-Paare in der Sammlung iterieren kann.

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 davon ausgeht, dass es nur mit element Objekten umgehen muss. Außerdem 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 unterstützen auch die Iterator-Methode (forEach()) sowie entries(), values() und keys().

Spezifikationen

Browser-Kompatibilität