Cómo navegar el DOM entre padres e hijos

Cuando trabajas con JavaScript y necesitas seleccionar un elemento que es hijo o padre de otro, entra en juego el traversing DOM: la técnica para navegar la estructura jerárquica del DOM de forma controlada. Aprenderás a moverte de padres a hijos y de hijos a padres usando métodos nativos, algo clave para cualquier persona que esté construyendo interfaces dinámicas.

¿Qué es traversing DOM y por qué importa?

El traversing DOM es la forma de recorrer los elementos del HTML respetando su relación familiar. Imagina un menú con una lista unordered list (ul) que dentro tiene varios list item (li). Si estás parado en un li y necesitas llegar a su ul, o desde el header quieres alcanzar el elemento más anidado sin pasar uno por uno, necesitas estas herramientas [00:14].

¿Qué es el traversing DOM? Es navegar los elementos del HTML según su jerarquía padre-hijo. Te permite seleccionar un elemento a partir de otro relacionado, sin tener que buscarlo desde cero.

Y aquí viene lo interesante: no todos los hijos son iguales. Hay un primer hijo, un último hijo y algunos en medio. Saber cuál seleccionar es justo lo que resuelve esta técnica.

¿Cómo navego de padres a hijos en el DOM?

Todo empieza seleccionando un elemento padre. En el ejemplo se toma un ul con el ID parent, porque tiene cuatro hijos directos dentro [02:09].

javascript const parent = document.getElementById("parent"); console.log(parent);

Al imprimirlo, el elemento padre llega con todos sus hijos cargados automáticamente. Ese es tu punto de partida o target root.

¿Cómo llego al primer y último hijo?

Para traer la colección completa de hijos usas children, que en este caso devuelve los cuatro elementos li dentro del padre. Pero si solo te interesa uno específico, tienes métodos directos:

• firstElementChild: te trae el primer hijo. En el ejemplo se reconoce porque es el único li sin clase, mientras los otros tres sí tienen la clase menu items.
• lastChild: te lleva al último hijo, que sí tiene la clase menu items.
• children: devuelve una colección con todos los hijos directos.

javascript const firstChild = parent.firstElementChild; console.log(firstChild);

Un detalle práctico: si escribes mal el nombre de la constante o del método, la consola te marca un typo, así que revisa siempre la ortografía exacta.

¿Cómo llego a los hermanos del padre?

Aquí dejamos de hablar de hijos y pasamos a la misma línea familiar del padre. Si tu ul tiene un p (etiqueta de párrafo) antes y un section después, puedes alcanzarlos así:

• previousSibling: trae el hermano previo, en este caso la etiqueta de párrafo, que sería como el tío de los hijos.
• nextSibling: trae el siguiente hermano, el section que va después del padre.
• childNodes: otra opción para recorrer los nodos hijos.

Estos elementos están en la misma posición familiar que tu padre, pero no son sus hijos. Es la diferencia entre bajar un nivel y moverte de lado.

¿Cómo selecciono padres desde un hijo?

Ahora el camino inverso: partir de un hijo y subir hacia sus padres. Primero seleccionamos un li con querySelector, que trae el primero disponible (el que va sin clases) [08:29].

javascript const children2 = document.querySelector("li"); console.log(children2);

Desde ese hijo puedes escalar la jerarquía con tres métodos distintos.

¿Qué diferencia hay entre parentNode, parentElement y closest?

Cada uno sube de forma distinta y conviene entender cuándo usar cada uno:

• parentNode: te trae el nodo padre del elemento seleccionado. Desde el li te devuelve la lista ul con todos sus hijos.
• parentElement: trae el elemento padre, que en este caso es la misma lista ul.
• closest: busca el ancestro más cercano que coincida con un selector. Al pedir closest("menu") desde el hijo, salta la lista y sube hasta el elemento de menú, que funciona como el abuelo o bisabuelo del li.

¿Para qué sirve closest en JavaScript? Sube por los ancestros de un elemento y devuelve el primero que coincida con el selector que le pasas. Ideal cuando no sabes cuántos niveles hay que subir.

javascript const grandGrandparent = children2.closest("menu"); console.log(grandGrandparent);

Un tip que aparece en el ejemplo: comenta el código anterior antes de ejecutar estos nuevos bloques, así evitas conflictos y ves cada resultado por separado.

¿Cuándo vas a usar esto en la práctica?

No es habitual que te toque seleccionar elementos de esta forma tan encadenada, pero cuando suceda, saber navegar el DOM te ahorra mucho trabajo. La recomendación es clara: experimenta con cada método sobre tu propio HTML para ver qué elemento selecciona realmente.

¿Cómo aprendo a navegar el DOM más rápido? Practicando. Toma una estructura HTML anidada, aplica firstElementChild, lastChild, nextSibling, parentNode y closest, e imprime cada resultado en consola para entender qué devuelve.

Si ya tienes un ejercicio con una estructura distinta, prueba estos métodos y comparte qué resultados te dan. ¿Cuál te costó más entender, la navegación hacia arriba o hacia abajo?