Et NodeList-objekt er en liste (samling) af noder udtrukket fra en dokument.
Et NodeList-objekt er næsten det samme som et HTMLCollection-objekt.
Nogle (ældre) browsere returnerer et NodeList-objekt i stedet for en HTMLCollection for metoder som getElementsByClassName().
Alle browsere returnerer et NodeList-objekt for egenskaben childNodes.
De fleste browsere returnerer et NodeList-objekt for metoden querySelectorAll().
Følgende kode vælger alle ><p> noder i et dokument:
const myNodeList = document.querySelectorAll("p");Elementerne i NodeList kan tilgås med et indeksnummer.
For at få adgang til anden <p> node kan du skrive:
myNodeList[1]Bemærk: Indekset starter ved 0.
Egenskaben length definerer antallet af noder i en nodeliste:
myNodelist.lengthEgenskaben length er nyttig, når du ønsker at gå gennem noderne i en node liste:
Skift farven på alle <p>-elementer i en node liste:
const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "red";
}Prøv det selv →
<!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>
En NodeList og en HTML-samling er meget det samme.
Begge er array-lignende samlinger (lister) af noder (elementer) udtrukket fra en dokument. Noderne kan tilgås ved hjælp af indeksnumre. Indekset starter ved 0.
Begge har en længde egenskab, der returnerer antallet af elementer i listen (samlingen).
En HTMLCollection er en samling af dokumentelementer.
En NodeList er en samling af dokumentnoder (elementnoder, attributnoder og tekstnoder).
HTMLCollection-elementer kan tilgås ved deres navn, id eller indeksnummer.
NodeList-elementer kan kun tilgås ved deres indeksnummer.
En HTMLCollection er altid en live samling. Eksempel: Hvis du tilføjer et
En NodeList er oftest en statisk samling. Eksempel: Hvis du tilføjer et
getElementsByClassName() og getElementsByTagName() metoder returnerer en live HTMLCollection.
Metoden querySelectorAll() returnerer en statisk NodeList.
Egenskaben childNodes returnerer en live NodeList.
En NodeList kan ligne en matrix, men det er den ikke.
Du kan sløjfe gennem en NodeList og henvise til dens noder efter indeks.
Men du kan ikke bruge Array-metoder som push(), pop() eller join() på en NodeList.