NodeList

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

Nonostante NodeList non sia un Array, è possibile iterare su esso usando forEach(). Può anche essere convertito in un vero Array usando Array.from().

Tuttavia, alcuni browser meno recenti non hanno implementato NodeList.forEach() n√© Array.from(). Questo pu√≤ essere aggirato usando Array.prototype.forEach() ‚ÄĒ vedi l'esempio di questo documento.

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.

Proprietà

NodeList.length
Il numero dei nodi nella NodeList.

Metodi

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.

Esempio

√ą 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;
});

Specifiche

Compatibilità con i browser

BCD tables only load in the browser