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
(en-US)- Il numero dei nodi nella
NodeList
.
Metodi
NodeList.item()
(en-US)- 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 quandoi
è fuori dai limiti). Ciò è utile soprattutto per le implementazioni DOM di linguaggi non JavaScript. NodeList.entries()
(en-US)- Ritorna un
iterator
(en-US) 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()
(en-US)- Ritorna un
iterator
(en-US) 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()
(en-US)- Ritorna un
iterator
(en-US) 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()
(en-US), values()
(en-US), e keys()
(en-US).
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
BCD tables only load in the browser