JavaScript DOM Nodelist


Innehållsförteckning

    Visa innehållsförteckning


HTML DOM NodeList-objektet

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:

Exempel

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.


HTML DOM Nod List Längd

Egenskapen length definierar antalet noder i en nodlista:

Exempel

myNodelist.length

Egenskapen length är användbar när du vill gå igenom noderna i en nod lista:

Exempel

Ä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>


Skillnaden mellan en HTMLCollection och en NodeList

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

  • -element till en lista i DOM, kommer listan i HTMLCollection också att ändras.

    En NodeList är oftast en statisk samling. Exempel: Om du lägger till ett

  • -element till en lista i DOM, kommer listan i NodeList inte att ändras.

    getElementsByClassName() och getElementsByTagName() metoder returnerar en levande HTMLCollection.

    Metoden querySelectorAll() returnerar en statisk NodeList.

    Egenskapen childNodes returnerar en live NodeList.


    Inte en Array!

    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.