Un NodeList
El objeto es esencialmente una colección de nodos (elementos DOM) tomados del documento HTML. Es muy parecido a una matriz, pero no admite métodos de matriz, ya que NodeLists y las matrices son dos cosas completamente diferentes.
En este artículo, aprenderá qué es un NodeList
y cómo puede usarlo en JavaScript para iterar sobre una lista de elementos DOM. El tutorial también cubre la diferencia entre un NodeList
y un HTMLCollection
brevemente.
Lista de nodos en vivo frente a estática
Un NodeList
puede ser en vivo o estático , lo que significa que los cambios en el DOM se aplican automáticamente a la colección o no afectan en absoluto a los elementos de la colección.
El método querySelectorAll() devuelve un NodeList
estático , mientras que el Node.childNodes
propiedad devuelve un NodeList
vivo .
Aquí hay un ejemplo de NodeList
en vivo :
const parent = document.getElementById('sidebar');
// collect children (return Live NodeList)
let childNodes = parent.childNodes;
// print length (assume "1")
console.log(childNodes.length);
// add a new Node to parent
parent.appendChild(document.createElement('div'));
// print length again (output "2")
console.log(childNodes.length);
Es bueno recordar esta distinción cuando decide iterar sobre una lista de nodos.
Creando un NodeList
El querySelectorAll()
El método se puede usar para extraer un JavaScript NodeList
objeto del documento. El siguiente ejemplo selecciona todos <div>
elementos en el documento:
const divs = document.querySelectorAll('div');
Para seleccionar un nodo específico del NodeList
colección, solo use el número de índice (comienza en 0):
// select 3rd node in NodeList
const div = document.querySelectorAll('div')[2];
Longitud del NodeList
El número de nodos dentro de un NodeList
Se puede acceder al objeto a través del NodeList.length
propiedad:
const paragraphs = document.querySelectorAll('p');
// print NodeList length
console.log(paragraphs.length);
El length
La propiedad puede ser muy útil al iterar sobre un NodeList
usando el bucle for tradicional:
const paragraphs = document.querySelectorAll('p');
// iterate over all paragraphs
for (let i = 0; i < paragraphs.length; i++) {
console.log(paragraphs[i].innerText);
}
Iterando sobre un NodeList
Hay varias formas de iterar sobre un NodeList
objeto en JavaScript. La forma más sencilla y sencilla es utilizar el método forEach(). Ejecuta la función dada una vez para cada elemento en el NodeList
colección:
const paragraphs = document.querySelectorAll('p');
// iterate over all paragraphs
paragraphs.forEach((p, index) => {
console.log(p.innerText);
});
Los navegadores modernos también son compatibles con entries()
, keys()
y values()
métodos en un NodeList
objeto. Echa un vistazo a esta guía para conocer más formas de iterar elementos DOM en JavaScript, incluido el último bucle for...of.
Listas de nodos frente a arreglos
Un NodeList
puede parecer una matriz, pero en realidad, ambos son dos cosas diferentes. Puede iterar a través de un NodeList
usando forEach()
y acceda directamente a sus nodos utilizando un valor de índice, como una matriz.
Sin embargo, no puede usar métodos de matriz como push()
, pop()
, join()
y valueOf()
para un NodeList
. Un NodeList
se puede convertir en una matriz real usando el Array.from()
(solo funciona en navegadores modernos).
NodeList
contra HTMLCollection
Un NodeList
y un HTMLCollection
son muy iguales cosa. Un HTMLCollection
es básicamente una colección de elementos HTML, mientras que un NodeList
objeto consta de nodos de elementos. Entonces, ambas colecciones se refieren a las mismas cosas:elementos HTML.
Ambos tienen un length
propiedad para obtener el número total de elementos dentro de la colección, cada uno de los cuales es accesible mediante un número de índice como matriz. Sin embargo, además del número de índice, los elementos dentro del HTMLCollection
se puede acceder a través de su nombre y ID , algo que no posible con un NodeList
objeto.
Asimismo, el NodeList
el objeto puede contener atributo y texto nodos. Ese no es el caso con HTMLCollection
de JavaScript .
Una similitud más entre un NodeList
y un HTMLCollection
es que son no matrices, por lo que puede utilizar los métodos de matriz como push()
, pop()
, join()
y valueOf()
para HTMLCollection
también.
Resumen
En este artículo, analizamos el NodeList
objeto y cómo usarlo en JavaScript. En resumen:
- A
NodeList
es una colección de elementos nodos (elementos DOM). - A
NodeList
puede ser en vivo o estático , lo que significa que las modificaciones a los elementos DOM se aplican de inmediato a la colección o se ignoran por completo. - El
document.querySelectorAll()
se puede usar para crear unNodeList
estático en JavaScript. - Puede mostrar el número total de nodos dentro de un
NodeList
usando ellength
propiedad. - JavaScript proporciona varias formas de iterar sobre un
NodeList
objeto. El más fácil es el método forEach(). - A
NodeList
es no una matriz, por lo que los métodos de matriz comunes no funcionarán. - A
NodeList
es muy similar a unHTMLCollection
, excepto queNodeList
solo se puede acceder a los elementos a través de su número de índice (0, 1, 2, ....), mientras que unHTMLCollection
se puede acceder a los elementos con un número de índice, nombre o ID.