Elenchi di nodi JavaScript HTML DOM
L'oggetto HTML DOM NodeList
Un NodeListoggetto è un elenco (raccolta) di nodi estratti da un documento.
Un NodeListoggetto è quasi uguale a un HTMLCollectionoggetto.
Alcuni browser (precedenti) restituiscono un oggetto NodeList invece di una HTMLCollection per metodi come getElementsByClassName().
Tutti i browser restituiscono un oggetto NodeList per la proprietà childNodes.
La maggior parte dei browser restituisce un oggetto NodeList per il metodo querySelectorAll().
Il codice seguente seleziona tutti i <p>nodi in un documento:
Esempio
const myNodeList = document.querySelectorAll("p");
È possibile accedere agli elementi nella NodeList tramite un numero di indice.
Per accedere al secondo nodo <p> puoi scrivere:
myNodeList[1]
Nota: l'indice inizia da 0.
Lunghezza elenco nodi HTML DOM
La lengthproprietà definisce il numero di nodi in un elenco di nodi:
Esempio
myNodelist.length
La lengthproprietà è utile quando si desidera scorrere i nodi in un elenco di nodi:
Esempio
Cambia il colore di tutti gli elementi <p> in un elenco di nodi:
const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "red";
}
La differenza tra una HTMLCollection e una NodeList
Un HTMLCollection(capitolo precedente) è una raccolta di elementi HTML.
A NodeListè una raccolta di nodi di documenti.
Una NodeList e una raccolta HTML sono praticamente la stessa cosa.
Sia un oggetto HTMLCollection che un oggetto NodeList sono un elenco (raccolta) di oggetti simile a una matrice.
Entrambi hanno una proprietà length che definisce il numero di elementi nell'elenco (raccolta).
Entrambi forniscono un indice (0, 1, 2, 3, 4, ...) per accedere a ciascun elemento come un array.
È possibile accedere agli elementi di HTMLCollection in base al nome, all'ID o al numero di indice.
È possibile accedere agli elementi di NodeList solo tramite il loro numero di indice.
Solo l'oggetto NodeList può contenere nodi di attributi e nodi di testo.
Un elenco di nodi non è un array!
Un elenco di nodi può sembrare un array, ma non lo è.
Puoi scorrere l'elenco dei nodi e fare riferimento ai suoi nodi come un array.
Tuttavia, non è possibile utilizzare i metodi Array, come valueOf(), push(), pop() o join() su un elenco di nodi.