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()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

Specifica Stato Commento
DOM
The definition of 'NodeList' in that specification.
Living Standard  
Document Object Model (DOM) Level 3 Core Specification
The definition of 'NodeList' in that specification.
Obsolete  
Document Object Model (DOM) Level 2 Core Specification
The definition of 'NodeList' in that specification.
Obsolete  
Document Object Model (DOM) Level 1 Specification
The definition of 'NodeList' in that specification.
Obsolete

Definizione iniziale.

Compatibilità con i browser

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
NodeListChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
entriesChrome Full support 51Edge Full support 16Firefox Full support 50IE No support NoOpera Full support 38Safari Full support 10WebView Android Full support 51Chrome Android Full support 51Firefox Android Full support 50Opera Android ? Safari iOS Full support 10Samsung Internet Android Full support 5.0
forEachChrome Full support 51Edge Full support 16Firefox Full support 50IE No support NoOpera Full support 38Safari Full support 10WebView Android Full support 51Chrome Android Full support 51Firefox Android Full support 50Opera Android Full support 41Safari iOS Full support 10Samsung Internet Android Full support 5.0
itemChrome Full support 1Edge Full support 12Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
keysChrome Full support 51Edge Full support 16Firefox Full support 50IE No support NoOpera Full support 38Safari Full support 10WebView Android Full support 51Chrome Android Full support 51Firefox Android Full support 50Opera Android ? Safari iOS Full support 10Samsung Internet Android Full support 5.0
lengthChrome Full support 1Edge Full support 12Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
valuesChrome Full support 51Edge Full support 16Firefox Full support 50IE No support NoOpera Full support 38Safari Full support 10WebView Android Full support 51Chrome Android Full support 51Firefox Android Full support 50Opera Android ? Safari iOS Full support 10Samsung Internet Android Full support 5.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown