HTML DOM NodeList referentiemanual

NodeList

NodeList is een verzameling van knooppuntenobjecten die lijkt op een array (lijst).

Knooppunten in NodeList kunnen worden bereikt via index (beginnend bij 0).

Lengte propertyGeef het aantal knooppunten in de NodeList terug.

NodeList vs. HTMLCollection

NodeList en HTMLCollection Bijna hetzelfde.

Zie de uitleg onder de pagina.

Wie retourneert NodeList?

childNodes eigenschap

querySelectorAll() methode

getElementsByName() methode

Eigenschappen en methoden

U kunt de volgende eigenschappen en methoden gebruiken op NodeList:

Naam Beschrijving
entries() Geef een iterator terug met pairs van sleutel/waarde.
forEach() Voer een callbackfunctie uit voor elk knooppunt in de lijst.
item() Geef het knooppunt op de specifieke index terug.
keys() Gebruik de sleutels in de lijst om een iterator terug te krijgen.
length Geef het aantal knooppunten in de NodeList terug.
values() Gebruik de waarden in de lijst om een iterator terug te krijgen.

Voorbeelden

Selecteer alle <p> Knooppunt:

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

Elementen in de NodeList kunnen worden bereikt via hun indexnummer.

Om de tweede <p> knooppunt te bereiken, kunt u schrijven:

myNodeList[1]

Probeer het zelf uit

Opmerking:De index begint bij 0.

HTML DOM Node List Length

length Eigenschappen definiëren het aantal knooppunten in de knooppuntenlijst:

Voorbeeld 1

myNodelist.length

Probeer het zelf uit

Wanneer u door de knooppuntenlijst wilt navigeren:length Eigenschappen zijn zeer nuttig:

Voorbeeld 2

Wijzig de kleur van alle <p> elementen in de knooppuntenlijst:

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

Probeer het zelf uit

Niet een array

NodeList is geen array!

NodeList ziet eruit als een array, maar is dat niet.

Je kunt NodeList doorlopen en nodes gebruiken via hun indexnummer.

Maar je kunt geen Array-methoden gebruiken op NodeList, zoals push(), pop() of join().

Het verschil tussen HTMLCollection en NodeList

NodeList en HTMLcollection Zeer vergelijkbaar.

Beide zijn verzamelingen van knopen (elementen) uit het document die vergelijkbaar zijn met een array (lijst). Nodes kunnen via hun indexnummer worden bereikt. De index begint bij 0.

Beide hebben Lengte propertyen het retourneert het aantal elementen (collectie) in de lijst. De property length.

HTMLCollection isDocumentelementenCollectie.

NodeList is eenDocumentknopenZamengestelde verzameling van (elementknopen, eigenschapknopen en tekstknopen).

HTMLCollection items kunnen worden bereikt via hun naam, id of indexnummer.

NodeList items kunnen alleen via hun indexnummer worden bereikt.

HTMLCollection is altijd eenReal-timeCollectie. Bijvoorbeeld: als je een <li> element toevoegt aan de lijst in de DOM, verandert de lijst in HTMLCollection ook.

NodeList is meestal eenStatischCollectie. Bijvoorbeeld: als je een <li> element toevoegt aan de lijst in de DOM, verandert de lijst in NodeList niet.

getElementsByClassName() en getElementsByTagName() De methode retourneert een real-time HTMLCollection.

querySelectorAll() De methode retourneert een statische NodeList.

childNodes De eigenschap retourneert een real-time NodeList.

Real-time node lijst

In bepaalde gevallen is NodeListReal-time：Wijzigingen in DOM worden bijgewerkt in NodeList.

childNodes De methode retourneert een real-time NodeList.