HTML DOM NodeList -viittausopas

NodeList

NodeList on solmuobjektien vastaava taulukko (lista).

NodeList -solmut voidaan saavuttaa indeksin avulla (alkaen indeksistä 0).

length-ominaisuusPalauttaa NodeList -solujen määrän.

NodeList vs. HTMLCollection

NodeList ja HTMLCollection Lähes sama.

Katso selitykset sivun alaosassa.

Kuka palauttaa NodeListin?

childNodes -ominaisuus

querySelectorAll() -menetelmä

getElementsByName() -menetelmä

Ominaisuudet ja menetelmät

Voit käyttää seuraavia ominaisuuksia ja menetelmiä NodeListissä:

Nimi Kuvaus
entries() Palauttaa iteratorin solmuista ja niiden arvoista.
forEach() Suorita paluutoiminto jokaiselle solmulle.
item() Palauttaa määritetyn indeksin solmu.
keys() Palauta iteratori listan avaimien avulla.
length Palauttaa NodeList -solujen määrän.
values() Palauta iteratori listan arvojen avulla.

esimerkit

Valitse dokumentista kaikki <p> Solmu:

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

NodeList -elementit voidaan saavuttaa indeksin avulla.

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

myNodeList[1]

Kokeile itse

Huomioitavaa:Indeksointi alkaa 0:sta.

HTML DOM Node List Length

length Ominaisuus määrittää solutilin solujen määrän:

Esimerkki 1

myNodelist.length

Kokeile itse

Kun haluat käydä läpi solutilin solut:length Ominaisuudet ovat hyödyllisiä:

Esimerkki 2

Muuta kaikki <p> -elementtien väriä lista-ruudussa:

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

Kokeile itse

Ei taulukko

NodeList ei ole taulukko!

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

Voit käydä NodeList läpi ja käyttää sen solmuja indeksin avulla.

Mutta et voi käyttää NodeListissa array-metodeja, kuten push(), pop() tai join().

HTMLCollection ja NodeList eroavat toisistaan

NodeList ja HTMLcollection Erittäin samanlaisia.

Molemmat ovat dokumentista otettujen solmujen (elementtien) muodostamia taulukon kaltaisia kokoelmia (listoja). Solmut voidaan käydä läpi indeksin avulla. Indeksi alkaa 0:sta.

Molemmat length-ominaisuusse palauttaa listan (kokoelman) elementtien määrän.

HTMLCollection onHTML-dokumenttikokoelma.

NodeList onDokumentti solmuelementtiä (elementti, ominaisuus ja tekstipiste) kokoelma.

HTMLCollection-kohteita voidaan käydä läpi niiden nimen, id:n tai indeksin avulla.

NodeList-elementtiä voidaan käydä läpi vain niiden indeksin avulla.

HTMLCollection on ainaReaaliaikainenkokoelma. Esimerkiksi: jos lisäät <li> -elementin DOM-listaan, HTMLCollection-lista muuttuu.

NodeList on yleensäStatiikkakokoelma. Esimerkiksi: jos lisäät <li> -elementin DOM-listaan, NodeList-lista ei muutu.

getElementsByClassName() ja getElementsByTagName() Metodi palauttaa reaaliaikaisen HTMLCollection.

querySelectorAll() Metodi palauttaa staattisen NodeList.

childNodes ominaisuus palauttaa reaaliaikaisen NodeList.

reaaliaikainen solmutilkku

Joissakin tapauksissa NodeList onReaaliaikainen：DOM-muutokset päivittävät NodeList.

childNodes Metodi palauttaa reaaliaikaisen NodeList.