NodeList

L'oggetto NodeList è un insieme di nodi i quali sono caratterizzati da proprietà tra le quali Node.childNodes ed il metodo document.querySelectorAll().

In molti casi, la NodeList è una collezione dinamica, il che 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 è una collezione 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 particolareal modo in cui si salva la lunghezza della lista.

Proprietà

NodeList.length

Il numero dei nodi nella NodeList.

Metodi

NodeList.item()

Ritorna un elemento nella lista dal suo indice o null se l'indice è fuori misura; può essere usato come un'alternativa al classico accesso nodeList[idx] (che invece restituisce  undefined quando idx è fuori misura).

NodeList.entries()

Ritorna un iterator che permette di navigare attraverso tutte le coppie chiave/valore contenute in questo oggetto.

NodeList.forEach()

Esegue una funzione fornita per ogni elemento della NodeList.

NodeList.keys()

Ritorna un iterator che permette di navigare attraverso tutte le coppie chiave/valore contenute in questo oggetto.

NodeList.values()

Ritorna un iterator che permette di navigare attraverso tutte le coppie chiave/valore contenute in questo oggetto.

Esempio

È possibile iterare sugli elementi in una NodeList usando:

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

Non tentare di usare for...in o for each...in per enumerare gli elementi nella lista, poiché questo potrebbe anche enumerare la lunghezza e le proprietà degli elementi della NodeList e causare errori se il tuo script assume che debba avere a che fare con 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()

C'è anche un modo compatibile di Internet Explorer per usare Array.prototype.forEach per l'iterazione.

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

Specifiche

Compatibilità con Browser