NodeList

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

Nota: 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

Specification
DOM Standard # interface-nodelist

Compatibilidad con navegadores

BCD tables only load in the browser