NodeList

Gli oggetti NodeList sono un insieme di nodi, di solito restituiti da proprietà come Node.childNodes ed il metodo document.querySelectorAll().

In alcuni casi, la NodeList è dinamica, ciò significa che i cambiamenti nel DOM si riflettono sulla collezione. Per esempio, Node.childNodes è dinamico:

var parent = document.getElementById('parent');
var child_nodes = parent.childNodes;
console.log(child_nodes.length); // assume "2"
parent.appendChild(document.createElement('div'));
console.log(child_nodes.length); // dovrebbe produrre "3"

In altri casi, la NodeList è statica, ciò vuol dire che il contenuto della collezione non è influenzato da quelli nel DOM. document.querySelectorAll() restituisce una NodeList statica.

È bene tenere in mente questa distinzione quando si sceglie di iterare sugli elementi nella NodeList, ed in particolare al modo in cui si salva la lunghezza della lista.

NodeList.length

Il numero dei nodi nella NodeList.

NodeList.item()

Restituisce un elemento nell'elenco per il suo indice, o null se l'indice è fuori misura.

Un'alternativa all'accesso a nodeList[i] (che invece restituisce undefined quando i è fuori dai limiti). Ciò è utile soprattutto per le implementazioni DOM di linguaggi non JavaScript.

NodeList.entries()

Ritorna un iterator che permette al codice di passare attraverso tutte le coppie chiave/valore contenute nella collezione. (In questo caso, le chiavi sono numeri che iniziano da 0 e i valori sono nodi.)

NodeList.forEach()

Esegue una funzione fornita una volta per elemento NodeList passando l'elemento come argomento alla funzione.

NodeList.keys()

Ritorna un iterator che permette al codice di passare attraverso tutte le chiavi delle coppie chiave/valore contenute nella collezione. (In questo caso, i tasti sono numeri che iniziano da 0).

NodeList.values()

Ritorna un iterator che permette al codice di passare attraverso tutti i valori (nodi) delle coppie chiave/valore contenute nella collezione.

È possibile iterare sugli elementi in una NodeList usando un for loop:

for (var i = 0; i < myNodeList.length; i++) {
  var item = myNodeList[i];  // La chiamata myNodeList.item(i) non è necessaria in JavaScript
}

Non utilizzare for...in o for each...in per enumerare gli elementi nelle NodeList, poiché enumereranno anche le proprietà length e item e causeranno errori se il tuo script presume che debba occuparsi solo di oggetti element. Inoltre, for..in non garantisce la visita delle proprietà in un particolare ordine.

for...of itererà sugli oggetti NodeList correttamente:

var list = document.querySelectorAll( 'input[type=checkbox]' );
for (var item of list) {
  item.checked = true;
}

I browser recenti supportano anche metodi iteratori, forEach(), come entries(), values(), e keys().

Esiste anche un modo compatibile con Internet Explorer Array.prototype.forEach per l'iterazione.

var list = document.querySelectorAll( 'input[type=checkbox]' );
Array.prototype.forEach.call(list, function (item) {
  item.checked = true;
});