Manuale di riferimento NodeList HTML DOM

NodeList

NodeList è una raccolta di oggetti di nodi simile a un array (lista).

I nodi nella NodeList possono essere acceduti tramite l'indice (partendo da 0).

length属性Restituisce il numero di nodi nella NodeList.

NodeList vs. HTMLCollection

NodeList e HTMLCollection Quasi identico.

Vedere le istruzioni sottostanti la pagina.

Chi restituisce NodeList?

Proprietà childNodes

Metodo querySelectorAll()

Metodo getElementsByName()

Proprietà e metodi

Ecco le proprietà e i metodi che possono essere utilizzati sulla NodeList:

Nome Descrizione
entries() Restituisce un iteratore con coppie chiave/valore dalla lista.
forEach() Esegui una funzione di callback per ogni nodo nella lista.
item() Restituisce il nodo nella posizione specificata.
keys() Restituisce l'iteratore utilizzando le chiavi nella lista.
length Restituisce il numero di nodi nella NodeList.
values() Restituisce l'iteratore utilizzando i valori nella lista.

Esempi

Seleziona tutti gli esempi nel documento: <p> Nodo:

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

Gli elementi nella NodeList possono essere acceduti tramite l'indice.

Per accedere al secondo nodo <p>, è possibile scrivere:

myNodeList[1]

Prova a fare tu stesso

Attenzione:L'indice parte da 0.

Lunghezza della lista Node HTML DOM

length La proprietà definisce il numero di nodi nella lista di nodi:

Esempio 1

myNodelist.length

Prova a fare tu stesso

Quando si desidera esplorare i nodi nella lista di nodi,length Proprietà molto utili:

Esempio 2

Modifica il colore di tutti gli elementi <p> della lista di nodi:

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

Prova a fare tu stesso

Non è un array

NodeList non è un array!

NodeList potrebbe sembrare un array, ma non è così.

Puoi esplorare NodeList e utilizzare il riferimento dell'indice per i suoi nodi.

Ma non puoi usare metodi di array su NodeList, come push()、pop() o join().

Differenze tra HTMLCollection e NodeList

NodeList con HTMLcollection Molto simili.

Entrambi sono raccolte di nodi (elementi) estratti dal documento simili a array (liste). I nodi possono essere acceduti tramite l'indice. L'indice parte da 0.

Entrambi length属性, che restituisce il numero di elementi (raccolta) nella lista. Proprietà length

L'HTMLCollection èElemento documentodi raccolta.

Il NodeList èNodo documentoCollezione di nodi (nodo di elemento, nodo di attributo e nodo di testo).

Gli elementi dell'HTMLCollection possono essere acceduti tramite il loro nome, id o numero di indice.

I elementi NodeList possono essere acceduti solo tramite il loro numero di indice.

L'HTMLCollection è sempre unIn tempo realeRaccolta. Ad esempio: se si aggiunge un elemento <li> alla lista nel DOM, la lista nell'HTMLCollection cambia anche.

Il NodeList è di solito unStaticoRaccolta. Ad esempio: se si aggiunge un elemento <li> alla lista nel DOM, la lista nel NodeList non cambia.

getElementsByClassName() e getElementsByTagName() Il metodo restituisce un HTMLCollection in tempo reale.

querySelectorAll() Il metodo restituisce un NodeList statico.

childNodes L'attributo restituisce un NodeList in tempo reale.

Elenco di nodi in tempo reale

In alcuni casi, NodeList èIn tempo reale：Le modifiche nel DOM aggiornano il NodeList.

childNodes Il metodo restituisce un NodeList in tempo reale.