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

Nonostante NodeList non sia un Array, è possibile iterare su esso usando forEach().  Diversi browser precedenti non hanno ancora implementato questo metodo. Tu puoi anche convertirlo in un Array usando Array.from.

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

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 Browser

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Caratteristiche Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Supporto di base (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)
entries(), keys(), values(), forEach() 51 No support 50 (50) No support 38 10 (maybe prior)
Caratteristiche Android Android Webview Edge Firefox Mobile (Gecko) Firefox OS (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Supporto di base (Yes) (Yes) (Yes) (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)
entries(), keys(), values(), forEach() ? ? ? 50.0 (50) ? No support ? 10 (maybe prior) 51

Tag del documento e collaboratori

 Hanno collaborato alla realizzazione di questa pagina: giacar
 Ultima modifica di: giacar,