Ett NodeList
-objekt är en lista (samling) av noder som extraheras från en dokumentera.
Ett NodeList
-objekt är nästan detsamma som ett HTMLCollection
-objekt.
Vissa (äldre) webbläsare returnerar ett NodeList-objekt istället för en HTMLCollection för metoder som getElementsByClassName()
.
Alla webbläsare returnerar ett NodeList-objekt för egenskapen childNodes
.
De flesta webbläsare returnerar ett NodeList-objekt för metoden querySelectorAll()
.
Följande kod väljer alla ><p>
-noder i ett dokument:
const myNodeList = document.querySelectorAll("p");
Elementen i NodeList kan nås med ett indexnummer.
För att komma åt andra <p>-noden kan du skriva:
myNodeList[1]
Obs! Indexet börjar på 0.
Egenskapen length
definierar antalet noder i en nodlista:
myNodelist.length
Egenskapen length
är användbar när du vill gå igenom noderna i en nod lista:
Ändra färgen på alla <p>-element i en nod lista:
const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "red";
}
Prova själv →
<!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 och en HTML-samling är mycket samma sak.
Båda är arrayliknande samlingar (listor) av noder (element) extraherade från en dokumentera. Noderna kan nås med indexnummer. Indexet börjar på 0.
Båda har en length-egenskap som returnerar antalet element i listan (samlingen).
En HTMLCollection är en samling dokumentelement.
En NodeList är en samling dokumentnoder (elementnoder, attributnoder och textnoder).
HTMLCollection-objekt kan nås med deras namn, id eller indexnummer.
NodeList-objekt kan endast nås med deras indexnummer.
En HTMLCollection är alltid en live samling. Exempel: Om du lägger till ett
En NodeList är oftast en statisk samling. Exempel: Om du lägger till ett
getElementsByClassName()
och getElementsByTagName()
metoder returnerar en levande HTMLCollection.
Metoden querySelectorAll()
returnerar en statisk NodeList.
Egenskapen childNodes
returnerar en live NodeList.
En NodeList kan se ut som en array, men det är den inte.
Du kan gå igenom en NodeList och referera till dess noder efter index.
Men du kan inte använda Array-metoder som push(), pop() eller join() på en NodeList.