Elenco di nodi HTML DOM JavaScript

Oggetto NodeList dell'HTML DOM

NodeList L'oggetto è una lista di nodi (insieme) estratti dal documento.

Gli oggetti NodeList e HTMLCollection sono quasi identici.

Se si utilizza getElementsByClassName() Il metodo, alcuni (browser vecchi) restituiscono NodeList invece di HTMLCollection.

Tutti i browser restituiscono childNodes l'attributo restituisce un oggetto NodeList.

La maggior parte dei browser restituisce querySelectorAll() Il metodo restituisce un oggetto NodeList.

Il codice seguente seleziona tutti i nodi <p> del documento:

Esempio

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

}

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

Per accedere al secondo nodo <p>, puoi scrivere così:

y = myNodeList[1];

Nota:L'indice parte da 0.

Lunghezza della NodeList dell'HTML DOM

length L'attributo definisce il numero di nodi nella lista di nodi:

Esempio

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

}

Esempio di spiegazione:

  • Crea una lista di tutti gli elementi <p>
  • Mostra la lunghezza di questa lista

length L'attributo è molto utile quando si desidera esplorare i nodi nella lista di nodi:

Esempio

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

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

}

Prova tu stesso

La differenza tra HTMLCollection e NodeList

L'HTMLCollection (capitolo precedente) è una raccolta di elementi HTML.

La NodeList è una raccolta di nodi del documento.

Gli oggetti HTMLCollection e NodeList sono liste (insiemi) di oggetti di tipo array.

Hanno tutti un elenco (insieme) di elementi definiti. length Proprietà.

Entrambi possono accedere a ogni elemento tramite l'indice (0, 1, 2, 3, 4, ...), come un array.

Per accedere agli elementi HTMLCollection, puoi farlo tramite il loro nome, id o numero di indice.

Per accedere agli elementi NodeList, puoi farlo solo tramite il loro numero di indice.

Solo gli oggetti NodeList possono contenere nodi e nodi di testo.

L'elenco di nodi non è un array!

L'array dei nodi sembra un array, ma non lo è.

Puoi esplorare l'elenco di nodi e referenziare i nodi come un array.

Ma non puoi usare i metodi dell'array sui elenchi di nodi, come valueOf()、push()、pop() o join().