JavaScript HTML DOM Node-Liste

NodeListDas Objekt ist eine Liste von Knoten (Sammlung), die aus dem Dokument abgerufen wird.

Das NodeList-Objekt ähnelt demHTMLCollection-Objekt.

Einige Methoden in älteren Browsern (wie zum Beispiel:getElementsByClassName()) geben ein NodeList-Objekt zurück, nicht ein HTMLCollection-Objekt.

Die EigenschaftchildNodesaller Browser gibt ein NodeList-Objekt zurück.

In den meisten Browsern gibtquerySelectorAll()ein NodeList-Objekt zurück.

Der folgende Code wählt alle <p>-Knoten im Dokument aus:

Beispiele

var myNodeList = document.querySelectorAll("p");

Auf Elemente in einer NodeList kann über den Index zugegriffen werden (beginnend bei 0).

Um auf das zweite <p>-Element zuzugreifen, können Sie den folgenden Code verwenden:

y = myNodeList[1];

Selbst ausprobieren »

length-Eigenschaft des NodeList-Objekts

Die length-Eigenschaft des NodeList-Objekts definiert die Anzahl der Elemente in der Knotenliste.

Beispiele

var myNodelist = document.querySelectorAll("p"); document.getElementById("demo").innerHTML = myNodelist.length;

Selbst ausprobieren »

Beispielanalyse

Eine Sammlung von <p>-Elementen abrufen:

var myNodelist = document.querySelectorAll("p");

Die Anzahl der Elemente in der Knotenliste anzeigen:

document.getElementById("demo").innerHTML = myNodelist.length;

Die length-Eigenschaft wird oft verwendet, um über eine NodeList zu iterieren.

Beispiele

Ändern Sie die Hintergrundfarbe aller <p>-Elemente in der NodeList:

var myNodelist = document.querySelectorAll("p"); var i; for (i = 0; i < myNodelist.length; i++) { myNodelist[i].style.backgroundColor = "red"; }

Selbst ausprobieren »

Unterschied zwischen HTMLCollection und NodeList

HTMLCollectionist eine Sammlung von HTML-Elementen.

NodeList ist eine Sammlung von Dokumentknoten.

NodeList und HTMLCollection haben viele Ähnlichkeiten.

Sowohl NodeList als auch HTMLCollection ähneln in gewisser Weise Array-Objekten, und Sie können den Index (0, 1, 2, 3, 4, ...) verwenden, um Elemente zu erhalten.

Sowohl NodeList als auch HTMLCollection haben eine length-Eigenschaft.

HTMLCollection-Elemente können über Name, id oder Index abgerufen werden.

Auf eine NodeList kann nur über den Index zugegriffen werden.

Nur NodeList-Objekte enthalten Attributknoten und Textknoten.

Eine Knotenliste ist kein Array!

Eine Knotenliste kann wie ein Array aussehen, ist es aber nicht.

Sie können den Index verwenden, um Elemente genau wie bei einem Array abzurufen.

Knotenlisten können keine Array-Methoden verwenden: valueOf(), pop(), push() oder join().

Andere Erweiterungen