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 stattdessenundefined
zurückgibt, wenni
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 bei0
, 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 bei0
.) 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 NodeList
s 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 |