Introducción a NodeList en JavaScript

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 un NodeList estático en JavaScript.
  • Puede mostrar el número total de nodos dentro de un NodeList usando el length 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 un HTMLCollection , excepto que NodeList solo se puede acceder a los elementos a través de su número de índice (0, 1, 2, ....), mientras que un HTMLCollection se puede acceder a los elementos con un número de índice, nombre o ID.