JavaScript HTML DOM 节点列表

HTML DOM NodeList-objekti

NodeList Objekti on solujen luettelo (kokoelma), joka on haettu dokumentista.

NodeList-objektit ja HTMLCollection-objektit ovat lähes samanlaisia.

Jos käytät getElementsByClassName() metodi, jotkut (vanhat) selaimet palauttavat NodeList-objektin sen sijaan HTMLCollection-objektina.

Kaikki selaimet palauttavat childNodes ominaisuuden NodeList-objektin.

Useimmat selaimet palauttavat querySelectorAll() Metodi palauttaa NodeList-objektin.

Seuraava koodi valitsee kaikki dokumentin <p>-solut:

Esimerkki

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

}

NodeList-elementtejä voidaan käydä läpi indeksin avulla.

Jos haluat käyttää toista <p>-solua, voit kirjoittaa näin:

y = myNodeList[1];

Huomautus:Indeksointi alkaa 0:sta.

HTML DOM Node List pituus

length Ominaisuus määrittää solujen luettelossa olevien solujen määrän:

Esimerkki

var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML = myNodelist.length;

}

Esimerkki selitys:

  • Luo kaikkien <p>-elementtien luettelo
  • Näytä luettelon pituus

length Ominaisuus on hyödyllinen, kun haluat käydä läpi solujen luetteloa:

Esimerkki

Muuta kaikki <p>-elementtien taustaväriä:

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

}

Kokeile itse

HTMLCollection ja NodeList eroavat toisistaan

HTMLCollection (edellinen luku) on HTML-elementtien kokoelma.

NodeList on dokumentin solmun kokoelma.

HTMLCollection- ja NodeList-objektit ovat luokkataulukon objektien lista (kokoelma).

Ne kaikki ovat määriteltyjen luettelojen (kokoelmat) kohteiden lukumäärällä length Ominaisuudet.

Ne voidaan käyttää taulukon tavoin kautta niiden indeksiä (0, 1, 2, 3, 4, ...), jotta voidaan avata jokainen kohta.

Vieritään HTMLCollection-projekteja niiden nimen, id:n tai indeksin kautta.

Vieritään NodeList-projekteja vain niiden indeksien kautta.

Vain NodeList-objektit voivat sisältää ominaisuus- ja tekstisolmuja.

Solmunlista ei ole taulukko!

Solmunarray näyttää taulukolta, mutta ei ole.

Voit käydä läpi solmunlistan ja viitata sen solmuihin kuin taulukko.

Kuitenkin, et voi käyttää taulukon menetelmiä solmunlistalle, kuten valueOf()japush()japop() tai join().