NodeList frente a HTMLCollection
Comprenda las diferencias entre las colecciones de elementos.
NodeList frente a HTMLCollection es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.
Dos tipos de colecciones
Los métodos del DOM devuelven uno de dos objetos similares a listas: un NodeList o una HTMLCollection. Parecen similares, pero se diferencian en aspectos importantes.
De dónde proviene NodeList
querySelectorAll y childNodes devuelven objetos NodeList. El que devuelve querySelectorAll es estático: una instantánea tomada en el momento de la consulta.
const items = document.querySelectorAll(".item"); // static NodeListDe dónde proviene HTMLCollection
getElementsByClassName, getElementsByTagName y la propiedad children devuelven objetos HTMLCollection dinámicos.
const items = document.getElementsByClassName("item"); // live HTMLCollectionEstático frente a dinámico
Un NodeList estático conserva su contenido original aunque cambie el DOM. Una HTMLCollection dinámica refleja automáticamente las adiciones y eliminaciones.
const liveList = document.getElementsByClassName("item");
const staticList = document.querySelectorAll(".item");
// add a new .item later:
// liveList.length increases, staticList.length does notCompatibilidad con forEach
NodeList tiene un forEach integrado. HTMLCollection no lo tiene, por lo que debe convertirla o usar un bucle con índices.
document.querySelectorAll(".item").forEach((el) => {
console.log(el.textContent);
});Ninguno es un arreglo real
Ambos se comportan como arreglos: tienen length y acceso mediante índices, pero carecen de map, filter y reduce.
const list = document.querySelectorAll(".item");
// list.map is undefinedConvertir con Array.from
Array.from convierte cualquiera de las dos colecciones en un arreglo real, lo que permite usar todos los métodos de arreglos.
const arr = Array.from(document.querySelectorAll(".item"));
const texts = arr.map((el) => el.textContent);Convertir con el operador spread
El operador spread es una alternativa concisa que también produce un arreglo real.
const arr = [...document.getElementsByClassName("item")];
const visible = arr.filter((el) => !el.hidden);La trampa de los bucles con listas dinámicas
Eliminar elementos mientras recorre una HTMLCollection dinámica desplaza los índices y omite elementos. Conviértala primero en un arreglo para recorrerla de forma segura.
const items = [...document.getElementsByClassName("done")];
items.forEach((el) => el.remove()); // safeIndexación de ambas colecciones
Ambas admiten índices numéricos y length, por lo que el acceso básico parece idéntico aunque su comportamiento interno sea diferente.
const a = document.querySelectorAll(".item");
const b = document.getElementsByClassName("item");
console.log(a[0], b[0], a.length, b.length);Elegir la colección adecuada
Use querySelectorAll cuando quiera una instantánea estable y forEach integrado. Use las colecciones dinámicas cuando necesite específicamente que la lista se mantenga sincronizada con el DOM.
Comprobación rápida
Detecte la diferencia.
Repaso
NodeList (de querySelectorAll) es estático y tiene forEach; HTMLCollection (de getElementsByClassName, getElementsByTagName y children) es dinámico y carece de forEach. Ninguno es un arreglo real; use Array.from o spread para convertirlo antes de usar map/filter/reduce y para recorrerlo de forma segura mientras realiza modificaciones.
Aprende JavaScript con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 59
- Lecciones
- 200
Preguntas frecuentes
¿La lección «NodeList frente a HTMLCollection» es gratis?
Sí — el texto completo de «NodeList frente a HTMLCollection» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.
¿Qué aprenderé en «NodeList frente a HTMLCollection»?
Comprenda las diferencias entre las colecciones de elementos. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar JavaScript Academy?
No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «NodeList frente a HTMLCollection»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?
Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Selección de elementos con querySelector
- getElementById y getElementsByClassName
- Recorrido de padres, hijos y hermanos
- NodeList frente a HTMLCollection