¿Cuál es la diferencia entre HTMLCollection y NodeList, y cómo obtenerlas?

En el desarrollo web, HTMLCollection y NodeList son colecciones comunes de objetos DOM, utilizadas para almacenar múltiples elementos DOM. Aunque parecen similares, existen diferencias notables en su comportamiento y características. Comprender estas diferencias es crucial para una manipulación eficiente de los elementos DOM.

1. HTMLCollection

HTMLCollection es una colección que se actualiza en tiempo real. Cuando la estructura del DOM cambia, HTMLCollection refleja automáticamente estos cambios. Solo incluye nodos de elementos, por lo que no almacena nodos de texto o de comentarios.

Características

• Actualización en tiempo real: Cuando la estructura del DOM cambia, HTMLCollection se actualiza automáticamente.
• Diversas formas de acceso: Se puede acceder a los elementos mediante índice, la propiedad length, o a través del atributo id o name del elemento.
• Solo contiene nodos de elementos: Ignora nodos de texto y comentarios.

Formas de obtenerla

• document.getElementsByTagName(tagName): Devuelve una colección de elementos por su nombre de etiqueta.
• document.getElementsByClassName(className): Devuelve una colección de elementos por su nombre de clase.
• document.forms, document.images, document.links: También devuelven HTMLCollection.

1
const divs = document.getElementsByTagName("div"); // Devuelve un HTMLCollection

2. NodeList

NodeList es una colección que puede contener cualquier tipo de nodo (elementos, texto, comentarios, etc.). Puede ser estática (no se actualiza con cambios en el DOM) o dinámica, dependiendo de cómo se obtenga.

Características

• No se actualiza en tiempo real: Las NodeList obtenidas con querySelectorAll son estáticas y no se actualizan automáticamente.
• Incluye todo tipo de nodos: Además de los elementos, puede almacenar nodos de texto, comentarios, entre otros.
• Soporta múltiples métodos de iteración: Es posible recorrer una NodeList usando forEach() (compatible en navegadores modernos).

Formas de obtenerla

• document.querySelectorAll(selector): Devuelve una NodeList estática.
• document.childNodes: Devuelve una NodeList dinámica que incluye todos los nodos hijos (elementos, texto, comentarios, etc.).
• parentNode.childNodes: Devuelve una NodeList con todos los nodos hijos de un nodo específico.

1
const divs = document.querySelectorAll("div"); // Devuelve un NodeList estática

Resumen de las diferencias clave

1. Diferencia de tipos:

   • HTMLCollection solo contiene nodos de elementos.
   • NodeList puede contener cualquier tipo de nodo (elementos, texto, comentarios, etc.).

2. Actualización en tiempo real:

   • HTMLCollection se actualiza en tiempo real.
   • NodeList, obtenida mediante querySelectorAll(), es estática, mientras que childNodes es dinámica.

3. Métodos de iteración:

   • Se puede acceder a HTMLCollection mediante índices, pero no soporta forEach().
   • NodeList soporta forEach(), lo que la hace más flexible para iterar.

Recomendaciones de uso

• Cuando necesites manipular una estructura DOM dinámica, es mejor utilizar HTMLCollection, ya que se actualiza automáticamente con los cambios en el DOM.
• Si solo necesitas una colección estática de elementos, NodeList es una mejor opción, especialmente cuando se obtiene mediante querySelectorAll().

Ejemplo de código

1
// Obtener HTMLCollection
2
let htmlCollection = document.getElementsByClassName("example");
3
console.log(htmlCollection); // Colección que se actualiza en tiempo real
4

5
// Obtener NodeList
6
let nodeList = document.querySelectorAll(".example");
7
console.log(nodeList); // Colección estática
8

9
// Recorrer NodeList
10
nodeList.forEach((element) => {
11
  console.log(element);
12
});

Al comprender las diferencias entre HTMLCollection y NodeList, los desarrolladores pueden manipular el DOM de manera más eficiente, mejorando el rendimiento y la mantenibilidad del código.