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

Aunque NodeList no es un Array, es posible iterar sobre él utilizando forEach(). También puede convertirse a un Array usando Array.from.

Sin embargo, algunos navegadores antiguos no han implementado NodeList.forEach() ni Array.from(). Pero esas limitaciones pueden eludirse utilizando Array.prototype.forEach() (más en este documento).

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, Node.childNodes está en vivo:

var parent = document.getElementById('parent');
var child_nodes = parent.childNodes;
console.log(child_nodes.length); // asumamos "2"
parent.appendChild(document.createElement('div'));
console.log(child_nodes.length); // debería imprimir "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. 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

NodeList.length
El número de nodos en la NodeList.

Métodos

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).
NodeList.entries()
Devuelve un iterator que permite pasar por todos los pares clave / valor contenidos en este objeto.
NodeList.forEach()
Ejecuta una función proporcionada una vez por elemento NodeList.
NodeList.keys()
Devuelve un iterator que permite pasar por todas las claves de los pares clave / valor contenidos en este objeto.
NodeList.values()
Devuelve un 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];  // No es necesario llamar a myNodeList.item(i) en 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 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 iteración, forEach(), así como entries(), values(), y keys()

También hay una forma compatible con Internet Explorer de usar 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

Especificación Estado Comentario
DOM
La definición de 'NodeList' en esta especificación.
Living Standard  
Document Object Model (DOM) Level 3 Core Specification
La definición de 'NodeList' en esta especificación.
Obsolete  
Document Object Model (DOM) Level 2 Core Specification
La definición de 'NodeList' en esta especificación.
Obsolete  
Document Object Model (DOM) Level 1 Specification
La definición de 'NodeList' en esta especificación.
Obsolete Definición inicial.

Compatibilidad en navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Soporte básicoChrome Soporte completo SiEdge Soporte completo SiFirefox Soporte completo SiIE Soporte completo SiOpera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo SiOpera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si
lengthChrome Soporte completo 1Edge Soporte completo 12Firefox ? IE ? Opera ? Safari ? WebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Soporte completo Si
entriesChrome Soporte completo 51Edge Soporte completo 16Firefox Soporte completo 50IE Sin soporte NoOpera Soporte completo 38Safari Soporte completo 10WebView Android Soporte completo 51Chrome Android Soporte completo 51Edge Mobile ? Firefox Android Soporte completo 50Opera Android ? Safari iOS Soporte completo 10Samsung Internet Android Soporte completo 5.0
forEachChrome Soporte completo 51Edge Soporte completo 16Firefox Soporte completo 50IE Sin soporte NoOpera Soporte completo 38Safari Soporte completo 10WebView Android Soporte completo 51Chrome Android Soporte completo 51Edge Mobile ? Firefox Android Soporte completo 50Opera Android ? Safari iOS Soporte completo 10Samsung Internet Android Soporte completo 5.0
itemChrome Soporte completo 1Edge Soporte completo 12Firefox ? IE ? Opera ? Safari ? WebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Soporte completo Si
keysChrome Soporte completo 51Edge Soporte completo 16Firefox Soporte completo 50IE Sin soporte NoOpera Soporte completo 38Safari Soporte completo 10WebView Android Soporte completo 51Chrome Android Soporte completo 51Edge Mobile ? Firefox Android Soporte completo 50Opera Android ? Safari iOS Soporte completo 10Samsung Internet Android Soporte completo 5.0
valuesChrome Soporte completo 51Edge Soporte completo 16Firefox Soporte completo 50IE Sin soporte NoOpera Soporte completo 38Safari Soporte completo 10WebView Android Soporte completo 51Chrome Android Soporte completo 51Edge Mobile ? Firefox Android Soporte completo 50Opera Android ? Safari iOS Soporte completo 10Samsung Internet Android Soporte completo 5.0

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibility unknown  
Compatibility unknown

Etiquetas y colaboradores del documento

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