JavaScript HTML DOM-knooppuntlijsten
Het HTML DOM NodeList-object
Een NodeList
object is een lijst (verzameling) van knooppunten die uit een document zijn geëxtraheerd.
Een NodeList
object is bijna hetzelfde als een HTMLCollection
object.
Sommige (oudere) browsers retourneren een NodeList-object in plaats van een HTMLCollection voor methoden zoals getElementsByClassName()
.
Alle browsers retourneren een NodeList-object voor de eigenschap childNodes
.
De meeste browsers retourneren een NodeList-object voor de methode querySelectorAll()
.
De volgende code selecteert alle <p>
knooppunten in een document:
Voorbeeld
const myNodeList = document.querySelectorAll("p");
De elementen in de NodeList zijn toegankelijk via een indexnummer.
Om toegang te krijgen tot het tweede <p> knooppunt kun je schrijven:
myNodeList[1]
Opmerking: de index begint bij 0.
Lengte van HTML DOM-knooppuntlijst
De length
eigenschap definieert het aantal knooppunten in een lijst met knooppunten:
Voorbeeld
myNodelist.length
De length
eigenschap is handig als u door de knooppunten in een lijst met knooppunten wilt lopen:
Voorbeeld
Verander de kleur van alle <p> elementen in een knooppuntenlijst:
const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "red";
}
Het verschil tussen een HTMLCollection en een NodeList
Een HTMLCollection
(vorig hoofdstuk) is een verzameling HTML-elementen.
A NodeList
is een verzameling documentknooppunten.
Een NodeList en een HTML-verzameling is vrijwel hetzelfde.
Zowel een HTMLCollection-object als een NodeList-object is een array-achtige lijst (verzameling) van objecten.
Beide hebben een lengte-eigenschap die het aantal items in de lijst (collectie) definieert.
Beide bieden een index (0, 1, 2, 3, 4, ...) om toegang te krijgen tot elk item als een array.
HTMLCollection-items zijn toegankelijk via hun naam, ID of indexnummer.
NodeList-items zijn alleen toegankelijk via hun indexnummer.
Alleen het NodeList-object kan attribuutknooppunten en tekstknooppunten bevatten.
Een knooppuntenlijst is geen array!
Een lijst met knooppunten lijkt misschien op een array, maar is het niet.
U kunt door de lijst met knooppunten lopen en naar de knooppunten verwijzen als een array.
U kunt echter geen array-methoden gebruiken, zoals valueOf(), push(), pop() of join() in een lijst met knooppunten.