Saber moverse entre los elementos del DOM de forma jerárquica es una habilidad fundamental para cualquier persona que trabaje con JavaScript y manipulación de páginas web. Cuando necesitas acceder al padre directo de un elemento, a su primer hijo o incluso a un "bisabuelo" en la estructura HTML, existen métodos específicos que te permiten hacerlo sin recorrer manualmente cada nivel del árbol.
¿Qué significa transversing en el DOM?
El concepto de DOM transversing [01:52] se refiere a la capacidad de recorrer y seleccionar elementos del DOM de forma jerárquica. Imagina una estructura HTML donde tienes un header, dentro un menu, dentro un ul y dentro varios li. Si ya seleccionaste uno de esos li, ¿cómo llegas al ul que lo contiene? ¿O cómo saltas directamente al menu? Eso es exactamente lo que resuelve la navegación jerárquica del DOM.
Existen cuatro direcciones principales para moverse:
- Navegar de padres a hijos (descendente).
- Navegar de hijos a padres (ascendente).
- Navegar entre hermanos del mismo nivel (siblings).
- Navegar hacia ancestros más lejanos.
¿Cómo se navega de padres a hijos en el DOM?
El punto de partida es seleccionar un elemento padre. En el ejemplo práctico [03:25], se selecciona un ul con el ID parent usando document.getElementById('parent'). Este elemento contiene cuatro hijos directos (li), y a partir de él se utilizan distintos métodos para acceder a ellos.
¿Qué hace el método children?
Al usar parent.children [04:40] obtienes una colección de elementos HTML que representa todos los hijos directos del elemento seleccionado. En este caso devuelve cuatro elementos. Es útil para saber cuántos hijos tiene un nodo y recorrerlos.
¿Cómo acceder al primer y último hijo?
Para obtener únicamente el primer hijo, se utiliza parent.firstElementChild [05:48]. Este método devuelve solo el primer elemento dentro del padre, sin necesidad de recorrer toda la colección. De forma similar, parent.lastElementChild [08:08] devuelve el último hijo del elemento padre.
Otros métodos importantes para moverse entre elementos del mismo nivel son:
previousElementSibling: devuelve el hermano anterior del elemento padre, es decir, un elemento que está al mismo nivel jerárquico pero antes en el HTML [08:30].nextElementSibling: devuelve el hermano siguiente del elemento padre [09:30].
En el ejemplo, el hermano previo del ul es una etiqueta <p>, y el hermano siguiente es un <section>. Estos no son hijos del ul, sino elementos que comparten el mismo padre que él.
¿Cómo se navega de hijos a padres en el DOM?
La navegación inversa es igual de importante. Si ya seleccionaste un elemento hijo y necesitas subir en la jerarquía, tienes varios métodos a tu disposición [11:40].
¿Qué diferencia hay entre parentNode y parentElement?
Ambos métodos devuelven el padre directo del elemento seleccionado. Con children2.parentNode [12:48] obtienes el nodo padre, mientras que con children2.parentElement obtienes el elemento padre. En la mayoría de los casos prácticos el resultado es el mismo, pero la diferencia técnica radica en que parentNode puede devolver nodos que no sean elementos HTML (como nodos de texto o el documento mismo).
¿Cómo llegar a un ancestro lejano con closest?
El método closest() [14:05] es especialmente poderoso. Permite saltar varios niveles de jerarquía y encontrar el ancestro más cercano que coincida con un selector CSS específico. En el ejemplo, children2.closest('menu') busca desde el li seleccionado hacia arriba hasta encontrar un elemento <menu>, saltándose el ul intermedio. Esto equivale a buscar al "bisabuelo" del elemento sin tener que encadenar múltiples llamadas a parentElement.
Algunos métodos adicionales que vale la pena experimentar:
childNodes: devuelve todos los nodos hijos, incluyendo nodos de texto.firstChild y lastChild: similares a sus versiones con Element, pero incluyen nodos de texto.previousSibling y nextSibling: versiones que también consideran nodos de texto.
La mejor forma de dominar la navegación del DOM es practicar con estructuras HTML variadas, aplicar cada método y observar qué elemento devuelve. Aunque no es algo que necesites a diario, cuando se presenta la situación, saber cómo moverte entre nodos marca una gran diferencia. ¿Ya probaste estos métodos con tu propio HTML? Comparte tu experiencia en los comentarios.
