JavaScript DOM-solmuluettelo

Sisällysluettelo

    Näytä sisällysluettelo

HTML DOM NodeList -objekti

NodeList-objekti on luettelo (kokoelma) solmuista, jotka on purettu asiakirja.

NodeList-objekti on melkein sama kuin HTMLCollection-objekti.

Jotkut (vanhemmat) selaimet palauttavat NodeList-objektin HTMLCollectionin sijaan menetelmille, kuten getElementsByClassName().

Kaikki selaimet palauttavat NodeList-objektin ominaisuudelle childNodes.

Useimmat selaimet palauttavat NodeList-objektin menetelmälle querySelectorAll().

Seuraava koodi valitsee kaikki <p>-solmut asiakirjassa:

Esimerkki

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

NodeListin elementteihin pääsee käsiksi indeksinumerolla.

Päästäksesi toinen <p>-solmu, jonka voit kirjoittaa:

myNodeList[1]

Huomaa: Indeksi alkaa 0:sta.

HTML DOM -solmuluettelon pituus

Ominaisuus length määrittää solmuluettelon solmujen määrän:

Esimerkki

myNodelist.length

length-ominaisuus on hyödyllinen, kun haluat kiertää solmun solmut lista:

Esimerkki

Muuta kaikkien solmun <p> elementtien väriä lista:

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

Kokeile itse →

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

Ero HTMLCollectionin ja NodeListin välillä

NodeList ja HTML-kokoelma ovat pitkälti sama asia.

Molemmat ovat taulukon kaltaisia kokoelmia (luetteloita) solmuista (elementeistä), jotka on poimittu a asiakirja. Solmuihin pääsee käsiksi indeksinumeroilla. Indeksi alkaa 0:sta.

Molemmilla on length-ominaisuus, joka palauttaa luettelon (kokoelman) elementtien määrän.

HTMLCollection on kokoelma asiakirjaelementtejä.

NodeList on kokoelma asiakirjasolmuja (elementtisolmuja, attribuuttisolmuja ja tekstisolmuja).

HTMLCollection-kohteita voidaan käyttää niiden nimen, tunnuksen tai indeksinumeron perusteella.

NodeList-kohteita voi käyttää vain niiden indeksinumerolla.

HTMLCollection on aina elävä kokoelma. Esimerkki: Jos lisäät

  • -elementin DOM:n luetteloon, myös HTMLCollectionin luettelo muuttuu.

    NodeList on useimmiten staattinen kokoelma. Esimerkki: Jos lisäät

  • -elementin DOM:n luetteloon, NodeListin luettelo ei muutu.

    getElementsByClassName() ja getElementsByTagName() menetelmät palauttavat elävän HTMLCollectionin.

    Metodi querySelectorAll() palauttaa staattisen NodeListin.

    Ominaisuus childNodes palauttaa elävän NodeListin.

    Ei Array!

    NodeList voi näyttää taulukolta, mutta se ei ole sitä.

    Voit selata solmuluetteloa ja viitata sen solmuihin indeksin mukaan.

    Et voi kuitenkaan käyttää Array-menetelmiä, kuten push(), pop() tai join() NodeListissä.