Hubo un error de script en esta página. Mientras los editores del sitio lo solucionan, puedes ver una parte del contenido más abajo.

{{APIRef("DOM")}}

los objetos NodeList son colecciones de nodos como los devueltos por propiedades como {{domxref ("Node.childNodes")}} y el método {{domxref ("document.querySelectorAll ()")}}..

Aunque NodeList no es una matriz, es posible iterar utilizando forEach (). Varios navegadores antiguos aún no han implementado este método. También puede convertirlo a una matriz usando Array.from.

En algunos casos, NodeList es una colección en vivo, lo que significa que los cambios en el DOM se reflejan en la colección. Por ejemplo, {{domxref ("Node.childNodes")}} está en vivo:

var parent = document.getElementById('parent');
var child_nodes = parent.childNodes;
console.log(child_nodes.length); // let's assume "2"
parent.appendChild(document.createElement('div'));
console.log(child_nodes.length); // should output "3"

 

En otros casos, NodeList es una colección estática, lo que significa que cualquier cambio posterior en el DOM no afecta el contenido de la colección. {{domxref ("document.querySelectorAll ()")}} devuelve un NodeList estático.

Es bueno tener en cuenta esta distinción cuando elige cómo iterar sobre los elementos en NodeList, y cómo guarda en caché la longitud de la lista en particular.

Propiedades

{{domxref("NodeList.length")}}
El número de nodos en el NodeList.

Métodos

 

{{domxref("NodeList.item()")}}

 

Devuelve un elemento en la lista por su índice, o null si el índice está fuera de límites; se puede utilizar como una alternativa para acceder simplemente a nodeList[idx] (que en cambio devuelve indefinido cuando idx está fuera de límites).
 
{{domxref("NodeList.entries()")}}
Devuelve un {{jsxref ("Iteration_protocols", "iterator")}} que permite pasar por todos los pares clave / valor contenidos en este objeto.
{{domxref("NodeList.forEach()")}}
Ejecuta una función proporcionada una vez por elemento NodeList.
{{domxref("NodeList.keys()")}}
Devuelve un {{jsxref ("Iteration_protocols", "iterator")}} que permite pasar por todas las claves de los pares clave / valor contenidos en este objeto.
{{domxref("NodeList.values()")}}
Devuelve un {{jsxref ("Iteration_protocols", "iterator")}} que permite recorrer todos los valores de los pares clave / valor contenidos en este objeto.

Ejemplo

Es posible iterar sobre los items en un NodeList usando:

for (var i = 0; i < myNodeList.length; i++) {
  var item = myNodeList[i];  // Calling myNodeList.item(i) isn't necessary in JavaScript
}

 

No se sienta tentado a for...in or for each...in para enumerar los elementos en la lista, ya que eso también enumerará la longitud y las propiedades del elemento de NodeList y causará errores si su secuencia de comandos asume que solo tiene que tratar con objetos {{domxref ("element")}}. Además, for..in no garantiza visitar las propiedades en ningún orden en particular.

Los bucles for...of harán un bucle sobre los objetos NodeList correctamente:

 

var list = document.querySelectorAll( 'input[type=checkbox]' );
for (var item of list) {
  item.checked = true;
}

 

Los navegadores recientes también son compatibles con los métodos de iterador, {{domxref ("NodeList.forEach ()", "forEach ()")}}, así como {{domxref ("NodeList.entries ()", "entries ()")} }, {{domxref ("NodeList.values ()", "values ()")}}, y {{domxref ("NodeList.keys ()", "keys ()")}}

También hay una forma compatible con Internet Explorer de usar {{jsxref ("Array.forEach ()", "Array.prototype.forEach")}} para la iteración.

 

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

Especificaciones

Specification Status Comment
{{SpecName('DOM WHATWG', '#interface-nodelist', 'NodeList')}} {{ Spec2('DOM WHATWG') }}  
{{SpecName('DOM3 Core', 'core.html#ID-536297177', 'NodeList')}} {{ Spec2('DOM3 Core') }}  
{{SpecName('DOM2 Core', 'core.html#ID-536297177', 'NodeList')}} {{ Spec2('DOM2 Core') }}  
{{SpecName('DOM1', 'level-one-core.html#ID-536297177', 'NodeList')}} {{ Spec2('DOM1') }} Initial definition.

Compatibilidad de navegadores

{{CompatibilityTable}}
Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
entries(), keys(), values(), forEach() {{CompatChrome(51)}} {{CompatNo}} {{CompatGeckoDesktop(50)}} {{CompatNo}} 38 10 (maybe prior)
Feature Android Android Webview Edge Firefox Mobile (Gecko) Firefox OS (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
entries(), keys(), values(), forEach() {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatGeckoMobile(50)}} {{CompatUnknown}} {{CompatNo}} {{CompatUnknown}} 10 (maybe prior) {{CompatChrome(51)}}

Etiquetas y colaboradores del documento

 Colaboradores en esta página: padrecedano
 Última actualización por: padrecedano,