Ein NodeList
-Objekt ist eine Liste (Sammlung) von Knoten, die aus einem extrahiert wurden dokumentieren.
Ein NodeList
-Objekt ist fast dasselbe wie ein HTMLCollection
-Objekt.
Einige (ältere) Browser geben ein NodeList-Objekt anstelle einer HTMLCollection zurück für Methoden wie getElementsByClassName()
.
Alle Browser geben ein NodeList-Objekt für die Eigenschaft childNodes
zurück.
Die meisten Browser geben ein NodeList-Objekt für die Methode querySelectorAll()
zurück.
Der folgende Code wählt alle <p>
-Knoten in einem Dokument aus:
const myNodeList = document.querySelectorAll("p");
Auf die Elemente in der NodeList kann über eine Indexnummer zugegriffen werden.
Um auf die zuzugreifen zweiten <p>-Knoten, den Sie schreiben können:
myNodeList[1]
Hinweis: Der Index beginnt bei 0.
Die Eigenschaft length
definiert die Anzahl der Knoten in einer Knotenliste:
myNodelist.length
Die Eigenschaft length
ist nützlich, wenn Sie die Knoten in einem Knoten durchlaufen möchten Liste:
Ändern Sie die Farbe aller <p>-Elemente in einem Knoten Liste:
const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "red";
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML DOM</h2>
<p>Hello World!</p>
<p>Hello Norway!</p>
<p>Click the button to change the color of all p elements.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "red";
}
}
</script>
</body>
</html>
Eine NodeList und eine HTMLcollection sind im Wesentlichen dasselbe.
Bei beiden handelt es sich um arrayartige Sammlungen (Listen) von Knoten (Elementen), die aus a extrahiert wurden dokumentieren. Auf die Knoten kann über Indexnummern zugegriffen werden. Der Index beginnt bei 0.
Beide verfügen über eine length-Eigenschaft, die die Anzahl der Elemente in der Liste (Sammlung) zurückgibt.
Eine HTMLCollection ist eine Sammlung von Dokumentelementen.
Eine NodeList ist eine Sammlung von Dokumentknoten (Elementknoten, Attributknoten und Textknoten).
Auf HTMLCollection-Elemente kann über ihren Namen, ihre ID oder ihre Indexnummer zugegriffen werden.
Auf NodeList-Elemente kann nur über ihre Indexnummer zugegriffen werden.
Eine HTMLCollection ist immer eine Live-Sammlung. Beispiel: Wenn Sie einer Liste im DOM ein
Eine NodeList ist meist eine statische Sammlung. Beispiel: Wenn Sie einer Liste im DOM ein
Die getElementsByClassName()
und getElementsByTagName()
Methoden geben eine Live-HTMLCollection zurück.
Die Methode querySelectorAll()
gibt eine statische NodeList zurück.
Die Eigenschaft childNodes
gibt eine Live-NodeList zurück.
Eine NodeList mag wie ein Array aussehen, ist es aber nicht.
Sie können eine NodeList durchlaufen und anhand des Index auf ihre Knoten verweisen.
Sie können jedoch keine Array-Methoden wie push(), pop() oder join() für eine NodeList verwenden.