¿Cómo recorrer el DOM con JavaScript?
¿Listo para dominar la forma en que tu código interactúa con las páginas web? El DOM es el mapa de tu sitio, y saber cómo navegar por él es la habilidad clave para crear experiencias interactivas y dinámicas. En esta guía, te convertirás en un experto en recorrer cada rincón del árbol del DOM, dándole a tu JavaScript el poder de manipular el contenido, la estructura y los estilos a tu antojo.
Índice
1. ¿Qué significa recorrer el DOM con JavaScript?
Recorrer el DOM con JavaScript implica navegar a través de la estructura del Document Object Model (DOM) de una página web utilizando JavaScript, para acceder y manipular los elementos del documento HTML.
Aquí hay una explicación más detallada:
1.1. ¿Qué es el DOM?
El DOM (Document Object Model) es una representación estructurada de un documento HTML, donde los elementos se organizan en una jerarquía de nodos. Cada etiqueta HTML se convierte en un nodo en este árbol, permitiendo que JavaScript interactúe con ellos.
Entonces. ¿Qué significa «recorrer» el DOM?
Recorrer el DOM implica utilizar distintas propiedades y métodos (que más adelante iremos viendo) para moverse desde un nodo a otro en esta estructura. Puedes acceder a nodos específicos, sus hijos, padres y hermanos.
PUNTO CLAVE SOBRE LOS NODOS:
- Padre (parentNode): Cada nodo tiene un solo padre.
- Hijos (childNodes): Un nodo puede tener cero o más hijos.
- Hermanos (nextSibling, previousSibling): Nodos que comparten el mismo padre.
- Nodos de elementos: Los métodos que terminan en
...Element(comonextElementSibling) te permiten navegar solo entre elementos, ignorando los nodos de texto y comentarios. ¡Esto es crucial y te ahorrará muchos dolores de cabeza!
1.2. ¿Para que sirve recorrer el DOM?
- ✅Acceso a elementos
- Puedes buscar y acceder a elementos específicos para realizar cambios, como modificar su contenido, aplicar estilos o añadir eventos.
- ✅Manipulación dinámica
- Permite crear, eliminar o modificar elementos HTML en respuesta a acciones del usuario o condiciones específicas.
- ✅Interactividad
- Ayuda a hacer la web más interactiva al responder a eventos, como clics de botones o cambios en formularios.
1.3. Ejemplo para ver como funciona:
Vamos a ver un ejemplo donde recorremos un DOM y realizamos una acción sobre algún elemento en específico siguiendo la siguiente estructura
- Tenemos un archivo HTML, que es lo que escribimos como desarrolladores.
- El navegador (por ejemplo, Google Chrome) lo procesa y lo transforma en una estructura de árbol llamada DOM (Document Object Model).
- Con JavaScript podemos recorrer ese DOM, seleccionar nodos o elementos y aplicar acciones.
Ejemplo paso a paso:
PASO 1. Estructura HTML (lo que escribimos nosotros)
Imaginemos que este es un archivo index.html, con esta estructura HTML básica:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo DOM</title>
</head>
<body>
<h1>Bienvenido</h1>
<p id="descripcion">Este es un párrafo de ejemplo.</p>
<button id="miBoton">Haz clic aquí</button>
</body>
</html>
Lenguaje del código: HTML, XML (xml)Explicación:
- El navegador recibe este código HTML.
- Lo que nosotros vemos en la pantalla es:
- Un título que dice Bienvenido.
- Un párrafo con texto.
- Un botón que dice Haz clic aquí.
PASO 2: Cómo lo interpreta el navegador → Representación en el DOM
El navegador lo convierte internamente en una estructura en forma de árbol (DOM):
Document
└── html
├── head
│ └── title ("Ejemplo DOM")
└── body
├── h1 ("Bienvenido")
├── p#descripcion ("Este es un párrafo de ejemplo.")
└── button#miBoton ("Haz clic aquí")
Lenguaje del código: PHP (php)Explicación:
- Cada etiqueta se convierte en un nodo/elemento dentro del árbol.
- Los textos también son nodos, pero hijos de esos elementos.
- A este árbol podemos acceder con JavaScript.
PASO 3. Recorrer el DOM con JavaScript
Ahora usamos JavaScript para seleccionar un elemento y realizar una acción.
<script>
// Seleccionamos el botón por su id
const boton = document.getElementById("miBoton");
// Agregamos un evento: cuando se haga clic, cambia el texto del párrafo
boton.addEventListener("click", () => {
const parrafo = document.getElementById("descripcion");
parrafo.textContent = "¡El párrafo ha cambiado después de hacer clic!";
});
</script>Lenguaje del código: HTML, XML (xml)Explicación paso a paso:
document.getElementById("miBoton")- Con esta línea accedemos al DOM y buscamos el elemento con el selector CSS de
id="miBoton". - Lo guardamos en la variable JS
boton.
- Con esta línea accedemos al DOM y buscamos el elemento con el selector CSS de
boton.addEventListener("click", () => { ... })- Le decimos al navegador: «cuando el usuario haga clic en este botón, ejecutá la función flecha que te paso».
- Dentro de esa función:
- Recorremos y buscamos el párrafo
id="descripcion", específicamente con esta parte del código:document.getElementById("descripcion");. - Usamos
.textContentpara cambiar su texto dinámicamente.
- Recorremos y buscamos el párrafo
📌 Resultado en la práctica:
- Antes de hacer clic: «Este es un párrafo de ejemplo.»
- Después de hacer clic en el botón: «¡El párrafo ha cambiado después de hacer clic!»
✅ Con esto ves el flujo completo:
HTML escrito → Navegador lo convierte en DOM → JavaScript lo recorre/selecciona → Acción dinámica en la página (cambiamos texto en este caso).
NOTA!!!! Si te animas y deseas ver el resultado de este ejemplo y de todos los que iremos proporcionando directamente desde tu PC, te invito a seguir estos pasos.
- Primero, revisa el punto 5 del siguiente artículo sobre como usar e instalar VSCode (este es el editor de código mas usado), donde encontrarás los pasos para crear la estructura necesaria para visualizar una página desde tu navegador predeterminado.
- Si entendiste correctamente este paso anterior, sabrás donde colocar el código
scriptque te acabamos de proporcionar (arriba). Ahora, puedes visualizar el resultado, para ello puedes hacer lo siguiente:- Una vez abierta y visualizada la página, abre la consola del navegador presionando la tecla F12.
- Ahora, dirígete a la pestaña que dice
Console, y desde aquí podrás ver el resultado del script que hayamos introducido anteriormente.
- No te preocupes, estos pasos son más simples de lo que parecen!!!! Entonces… cada vez que dejemos un código de ejemplo como éste, puedes seguir estos pasos y ver los resultados por ti mismo. ¡Ojalá te animes!!!!
2. Nodos vs. Elementos: La distinción clave
Como te expliqué, el DOM es un árbol de nodos, y los elementos son solo un tipo de nodo. Un nodo puede ser una etiqueta HTML (un nodo de elemento), el texto dentro de ella (un nodo de texto), o incluso un comentario («) (un nodo de comentario).
Imagina la siguiente estructura HTML:
<div id="padre">
Soy un texto
<span>Hijo 1</span>
Hijo 2
<p>Hijo 3</p>
</div>Lenguaje del código: HTML, XML (xml)📌En el DOM, div#padre (<div id="padre">)tiene cinco hijos nodos, y a su vez, dentro de estos nodos, SOLO DOS son de elementos (etiquetas HTML).
- Un nodo de comentario.
- Un nodo de texto (
Soy un texto). - Un nodo de elemento (
<span>). - Un nodo de texto (
Hijo 2). - Un nodo de elemento (
<p>).
¿Y porque es importante esta diferenciación?
⚠️Cuando recorres el DOM, algunos métodos te devuelven todos los nodos, mientras que otros solo te devuelven los elementos. Esta es la clave que mencioné para evitar dolores de cabeza.
- Métodos que devuelven nodos (incluyendo nodos de texto y comentarios):
parentNodechildNodesfirstChildnextSiblingpreviousSibling
- Métodos que devuelven solo elementos:
parentElementchildrenfirstElementChildnextElementSiblingpreviousElementSibling
2.1. Ejemplo de navegación entre nodos padres, hijos y hermanos:
Entender las relaciones de parentesco te permite moverte por el árbol DOM de forma intencionada.
2.1.1. Padre (parentNode, parentElement)
parentNode: Propiedad que te devuelve el nodo padre de un nodo dado. Siempre es un nodo de elemento, excepto para el<html>y eldocument.parentElement: Propiedad que te devuelve el padre que es un nodo de elemento. Es la forma más limpia de subir en la jerarquía si solo te interesan las etiquetas.
Ejemplo, teniendo en cuenta el HTML del inicio de este punto:
const span = document.querySelector('span');
console.log(span.parentNode); // Devuelve el div#padre (es un nodo de elemento)
console.log(span.parentElement); // Devuelve el div#padre (es un nodo de elemento)Lenguaje del código: JavaScript (javascript)En este caso, ambos devuelven lo mismo porque el padre es un elemento.
2.1.2. Hijos (childNodes, children)
childNodes: Devuelve una colección viva de todos los nodos hijos, incluyendo nodos de texto y comentarios.children: Devuelve una colección viva de solo los nodos de elemento hijos.
Ejemplo en código:
const padre = document.getElementById('padre');
console.log(padre.childNodes.length); // 5 (incluye el comentario y los textos)
console.log(padre.children.length); // 2 (solo el span y el p)Lenguaje del código: JavaScript (javascript)2.1.3. Hermanos (nextSibling, nextElementSibling, etc.)
nextSibling: Te devuelve el siguiente nodo en el mismo nivel, sin importar su tipo.previousSibling: Te devuelve el nodo anterior en el mismo nivel, sin importar su tipo.nextElementSibling: Te devuelve el siguiente nodo que es un elemento. Esta es la propiedad que usarás con más frecuencia.previousElementSibling: Te devuelve el nodo anterior que es un elemento.
Ejemplo en código:
const span = document.querySelector('span');
console.log(span.nextSibling); // Devuelve el nodo de texto 'Hijo 2'
console.log(span.nextElementSibling); // Devuelve el nodo de elemento <p>Lenguaje del código: JavaScript (javascript)Este ejemplo ilustra por qué nextElementSibling es tan útil: te salta los nodos de texto intermedios, que suelen ser espacios en blanco o saltos de línea y no son relevantes para la lógica de la aplicación.
RESUMEN: Los métodos que terminan en ...Element están diseñados para una navegación más limpia y directa a través de las etiquetas HTML, lo que a menudo es lo que un desarrollador profesional necesita para construir interfaces interactivas.
3. ¿Cómo recorrer el DOM con JavaScript? Paso a paso:
- PASO 1. Seleccionar un punto de partida (accediendo al DOM):
- PASO 2: Definir la dirección del recorrido:
PASO 1. Seleccionar un punto de partida (accediendo al DOM):
Para recorrer el DOM, siempre necesitas un punto de partida. Nunca empieces a navegar a ciegas desde el document si no es necesario, porque es ineficiente.
¿Cómo hacerlo?
Utiliza los métodos de selección que vimos, eligiendo el más específico para tu tarea, en el siguiente link podrás ver los diferentes métodos para acceder al DOM con JavaScript:
- Para un único elemento por ID:
document.getElementById('miId')(el más rápido). - Para el primer elemento que coincida con un selector CSS:
document.querySelector('.miClase')odocument.querySelector('p'). - Para múltiples elementos:
document.querySelectorAll('.claseComun')(el más común para colecciones).
Ejemplo de por qué primero seleccionamos punto de partida:
Imaginá que solo querés recorrer los <li> dentro de una lista HTML <ul class="menu">.
❌ MALO: empezar desde document y buscar todos los <li> de la página.
document.querySelectorAll("li"); // Devuelve TODOS los <li> (quizá cientos)Lenguaje del código: JavaScript (javascript)✅ MEJOR: elegir un punto de partida y recorrer desde ahí:
let menu = document.querySelector(".menu");
menu.querySelectorAll("li"); // Solo los <li> dentro de la lista con el selector class="menu"Lenguaje del código: JavaScript (javascript)Esto hace que tu código sea más rápido y más específico.
PASO 2: Definir la dirección del recorrido:
La navegación direccional es el corazón de cómo interactúas con el DOM. Una vez que has seleccionado un punto de partida, la clave está en saber qué método usar para moverte en la dirección correcta, ya sea hacia arriba, hacia abajo o lateralmente.
⬆️Moviéndose hacia arriba (al padre)
Cuando estás en un elemento y necesitas acceder a su contenedor o a un ancestro específico, tienes dos herramientas principales.
🧩el.parentElement
Esta propiedad te permite subir un solo nivel en el árbol del DOM. Te devuelve el padre inmediato del elemento, pero solo si ese padre es un nodo de elemento. Si el nodo padre es un nodo de documento, te devolverá null.
EJEMPLO: Imagina que tienes un botón dentro de un div, y quieres acceder a ese div.
HTML:
<div class="card">
<p>Contenido de la tarjeta</p>
<button id="btn-accion">Acción</button>
</div>Lenguaje del código: HTML, XML (xml)JavaScript:
// Primero seleccionamos el elemento
const boton = document.getElementById('btn-accion');
// Sube un nivel para encontrar el div.card
const tarjeta = boton.parentElement;
console.log(tarjeta.className); // Salida: 'card'
Lenguaje del código: JavaScript (javascript)Explicación: Partiendo del botón, parentElement te lleva directamente al div que lo contiene, permitiéndote acceder a sus propiedades o manipularlo.
🧩el.closest('selector')
Esta es una herramienta más potente y flexible. En lugar de subir solo un nivel, closest() busca hacia arriba en la jerarquía del DOM hasta encontrar el primer ancestro (padre, abuelo, tatarabuelo, etc.) que coincida con el selector CSS que le pasas.
EJEMPLO: Supongamos que un enlace está anidado profundamente, pero necesitas encontrar su contenedor principal.
HTML:
<div class="seccion-principal">
<article class="articulo">
<div class="contenido">
<p>Texto con un <a href="#">enlace</a>.</p>
</div>
</article>
</div>Lenguaje del código: HTML, XML (xml)JavaScript:
// Primero seleccionamos el elemento
const enlace = document.querySelector('a');
// Busca hacia arriba hasta encontrar el ancestro con la clase 'articulo'
const articuloPadre = enlace.closest('.articulo');
console.log(articuloPadre.tagName); // Salida: 'ARTICLE'
Lenguaje del código: JavaScript (javascript)Explicación: Aunque el enlace está anidado dentro de un <p> y un <div>, closest('.articulo') navega por esos elementos intermedios y te entrega directamente el article padre. Es ideal para manejar eventos en elementos anidados.
⬇️Moviéndose hacia abajo (a los hijos)
Para navegar desde un elemento padre a sus elementos hijos, tienes varios métodos.
🧩el.children
Esta propiedad devuelve una colección en vivo (HTMLCollection) de todos los hijos que son elementos. Es una forma rápida de obtener una lista de los elementos de primer nivel dentro de un contenedor, ignorando los nodos de texto y comentarios.
¿Qué significa «colección en vivo» (HTMLCollection) y en que se diferencia con una NodeList?
Una HTMLCollection en vivo es una lista de nodos que el navegador mantiene activa y sincronizada con el DOM. Esto significa que si un elemento se añade, elimina o reordena dentro del contenedor original, la HTMLCollection se actualiza de forma automática y refleja ese cambio.
En contraste, una NodeList estática (como la que devuelve querySelectorAll) es una instantánea del DOM en el momento en que se creó. No se actualiza si el DOM cambia.
¿Por qué es importante esta distinción?
La diferencia entre una colección en vivo y una estática es un punto crucial para evitar errores sutiles en tu código. Te lo muestro con un ejemplo.
EJEMPLO de código: Vamos a usar el.children (colección en vivo) para demostrar cómo se actualiza.
HTML:
<ul id="lista">
<li>Item 1</li>
<li>Item 2</li>
</ul>
Lenguaje del código: HTML, XML (xml)JavaScript:
const lista = document.getElementById('lista');
const hijosEnVivo = lista.children; // HTMLCollection en vivo
console.log('Número inicial de hijos:', hijosEnVivo.length); // Salida: 2
// Creamos y añadimos un nuevo elemento al DOM
const nuevoLi = document.createElement('li');
nuevoLi.textContent = 'Item 3';
lista.appendChild(nuevoLi);
// El tamaño de la colección en vivo se actualiza solo
console.log('Número de hijos después de añadir uno:', hijosEnVivo.length); // Salida: 3
Lenguaje del código: JavaScript (javascript)Explicación: La variable hijosEnVivo no es una simple copia; es una referencia directa a la lista de elementos hijos del <ul>. Cuando se agrega el tercer <li> al DOM, la colección se actualiza automáticamente.
Lo que pasa con una colección estática (NodeList) 📸
Ahora, veamos el mismo escenario con una NodeList estática, usando querySelectorAll.
Ejemplo de código:
const lista = document.getElementById('lista');
const hijosEstaticos = document.querySelectorAll('#lista > li'); // NodeList estática
console.log('Número inicial de hijos:', hijosEstaticos.length); // Salida: 2
// Creamos y añadimos un nuevo elemento al DOM
const nuevoLi = document.createElement('li');
nuevoLi.textContent = 'Item 3';
lista.appendChild(nuevoLi);
// La colección estática NO se actualiza
console.log('Número de hijos después de añadir uno:', hijosEstaticos.length); // Salida: 2
Lenguaje del código: JavaScript (javascript)Explicación: querySelectorAll tomó una «foto» del DOM en el momento de su ejecución. Aunque el DOM cambió, la variable hijosEstaticos sigue refiriéndose a la lista original de dos elementos.
RESUMEN: Una colección en vivo como HTMLCollection es útil cuando necesitas que tus referencias a elementos se mantengan actualizadas dinámicamente. Sin embargo, en muchos casos, la naturaleza estática de una NodeList es preferible porque evita que tu código se comporte de manera inesperada si la estructura del DOM cambia. Saber cuándo usar cada una es parte del arte de la manipulación del DOM.
EJEMPLO usando el.children:
HTML:
<ul id="lista">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>Lenguaje del código: HTML, XML (xml)JavaScript:
// Primero seleccionamos el elemento
const lista = document.getElementById('lista');
// Obtiene todos los hijos de la lista
const items = lista.children;
console.log(items.length); // Salida: 3
console.log(items[0].textContent); // Salida: 'Item 1'
Lenguaje del código: JavaScript (javascript)Explicación: lista.children te da acceso a un array-like de los li, permitiéndote iterar sobre ellos o acceder a un hijo específico por su índice.
🧩el.firstElementChild y el.lastElementChild
Estas propiedades te dan acceso directo al primer y al último hijo que es un elemento, sin necesidad de obtener toda la colección de hijos.
Ejemplo:
JavaScript
// Primero seleccionamos el elemento
const lista = document.getElementById('lista');
const primerItem = lista.firstElementChild;
const ultimoItem = lista.lastElementChild;
console.log(primerItem.textContent); // Salida: 'Item 1'
console.log(ultimoItem.textContent); // Salida: 'Item 3'
Lenguaje del código: JavaScript (javascript)Explicación: Son atajos muy útiles cuando solo necesitas interactuar con los extremos de una lista de elementos.
🧩el.querySelector('selector')
Este método es la forma más común y versátil de navegar hacia abajo. En lugar de buscar en todo el documento (document.querySelector), puedes usarlo en un elemento específico para buscar cualquier descendiente que coincida con el selector CSS. Es mucho más eficiente para búsquedas locales.
Ejemplo: HTML:
<div id="perfil">
<img src="perfil.jpg" alt="Foto de perfil">
<h2>Nombre de usuario</h2>
</div>
Lenguaje del código: HTML, XML (xml)JavaScript:
// Primero seleccionamos el elemento
const perfil = document.getElementById('perfil');
// Busca la imagen dentro del div#perfil
const imagenDePerfil = perfil.querySelector('img');
console.log(imagenDePerfil.src); // Salida: 'perfil.jpg'
Lenguaje del código: JavaScript (javascript)Explicación: Al llamar querySelector en perfil, la búsqueda se limita a los elementos que están dentro de ese div, haciendo el código más claro y la búsqueda más rápida.
↔️ Moviéndose lateralmente (entre hermanos)
Para pasar de un elemento a otro que está en el mismo nivel y comparte el mismo padre, usas las propiedades ...ElementSibling.
🧩el.nextElementSibling y el.previousElementSibling
Estas propiedades te permiten pasar de un elemento al siguiente o al anterior, saltándose cualquier nodo de texto o comentario.
Ejemplo: HTML:
<ul>
<li>Item 1</li>
<li id="item-2">Item 2</li>
<li>Item 3</li>
</ul>Lenguaje del código: HTML, XML (xml)JavaScript:
// Primero seleccionamos el elemento
const item2 = document.getElementById('item-2');
const siguienteItem = item2.nextElementSibling;
const itemAnterior = item2.previousElementSibling;
console.log(siguienteItem.textContent); // Salida: 'Item 3'
console.log(itemAnterior.textContent); // Salida: 'Item 1'
Lenguaje del código: JavaScript (javascript)Explicación: Desde item-2, puedes navegar de forma directa y limpia a sus hermanos en ambos lados. Esto es muy común cuando se construyen efectos visuales o lógicos que dependen de la posición de los elementos.
CONCLUSIÓN: Dominar estos métodos te dará un control total sobre la estructura de tu página, permitiéndote crear interacciones dinámicas y responsivas con confianza.
4. Recorrer el DOM con métodos de iteración.
Cuando seleccionas múltiples elementos del DOM (seria el paso 1 del punto anterior), obtienes una colección de elementos, no un solo elemento.
Los bucles (métodos de iteración) te permiten recorrer esta colección, accediendo a cada elemento uno por uno para manipularlo.
🎯Veamos PASO a PASO como usar estos métodos de iteración (bucles):
PASO 1: Obtener una colección de elementos:
Para obtener esta colección, el primer paso es seleccionar los elementos que necesitas manipular. Para esto, usas métodos de acceso al DOM (dejamos un link sobre ellos en el paso 1 del punto anterior) como document.querySelector(), document.querySelectorAll(), document.getElementById(), document.getElementsByClassName(), etc. El resultado de esta selección es una colección de elementos.
Ahora bien, ten en cuenta que, dependiendo el método de acceso que usemos, esta colección de elementos puede ser una NodeList, o una HTMLCollention.
NodeList: Obtenida condocument.querySelectorAll(). Es una colección estática que se parece a un array.HTMLCollection: Obtenida condocument.getElementsByClassName()oel.children. Es una colección en vivo que no es un array.
¿Y porque esto importa?
Porque los métodos de iteración (bucles) que usemos será uno u otro dependiendo de si la colección de elementos es una NodeList, o una HTMLcollention (ampliamos en siguiente paso).
¿Y que métodos de acceso al DOM me brinda una NodeList, o una HTMLcollention?
🚀Básicamente, la NodeList se obtiene principalmente con querySelectorAll(), mientras que la HTMLCollection se obtiene con los métodos que comienzan con getElementsBy... y con la propiedad children.
PASO 2: Elección del método de iteración
Una vez que tienes la colección, tu siguiente paso es elegir el método de iteración adecuado según el tipo de colección que obtuviste:
- 🧩for…of si es una HTMLCollection
- Esta colección no tiene el método
.forEach()de forma nativa. Por lo tanto, tu mejor opción es usar el buclefor...of(que funciona en ambas colecciones) o convertir la colección a un array conArray.from()para poder usarforEach. - 🧩.forEach() si es una NodeList
- Tienes la opción más sencilla. Puedes usar
.forEach()directamente en la colección o el buclefor...of. Ambos son modernos y preferibles.
5. Preguntas frecuentes y resumen sobre como recorrer el DOM.
El DOM es la representación en árbol de un documento HTML. Recorrerlo con JavaScript permite acceder, modificar o eliminar nodos y elementos, logrando manipulación dinámica de contenido, estilos y estructura en tiempo real dentro de una página web.
Un nodo es cualquier unidad del DOM, puede ser un elemento, texto o comentario. Un elemento es un tipo específico de nodo que representa etiquetas HTML (<div>, <p>, <span>). Todos los elementos son nodos, pero no todos los nodos son elementos.
Existen métodos clásicos como getElementById(), getElementsByClassName() y getElementsByTagName(). También los modernos querySelector() y querySelectorAll(), que permiten usar selectores CSS para mayor flexibilidad.
Se puede usar parentNode o parentElement. La primera devuelve el nodo padre, que puede ser cualquier tipo de nodo, mientras que parentElement garantiza que el resultado sea un elemento HTML válido.
Se utiliza children para obtener solo los nodos tipo elemento, o childNodes para incluir también textos y comentarios. Además, firstElementChild y lastElementChild permiten acceder al primer y último hijo respectivamente.
Se usan nextElementSibling para ir al hermano siguiente y previousElementSibling para ir al anterior. Estas propiedades devuelven solo elementos HTML, a diferencia de nextSibling o previousSibling que incluyen nodos de cualquier tipo.
HTMLCollection es una colección en vivo que se actualiza si el DOM cambia. NodeList puede ser estática o viva, según cómo se genere. Ambas se parecen a arrays, pero no poseen todos los métodos de los arrays nativos directamente.
Se puede usar un bucle for, for...of o convertir la colección a un array con Array.from(). Esto permite aplicar métodos modernos como forEach(), map() o filter() para recorrer y manipular los elementos.
El método más moderno y recomendado es forEach() aplicado sobre un NodeList o un array convertido desde una colección. Es más legible, claro y funcional que los bucles tradicionales, y se integra bien con estilos de programación modernos.