El recorrido del DOM implica desplazarse por la estructura del documento utilizando JavaScript para acceder, modificar o interactuar con diferentes nodos. El DOM está estructurado como un árbol con nodos conectados en una jerarquía, que incluye relaciones de padre, hijo y hermano:

• Nodo padre: Un nodo que contiene otros nodos anidados en su interior;
• Nodos hijos: Nodos ubicados directamente dentro de un nodo padre;
• Nodos hermanos: Nodos que comparten el mismo nodo padre y están al mismo nivel.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

En esta estructura:

• <ul> es el padre de los elementos <li>;
• Cada <li> es un hijo del <ul>;
• Los dos elementos <li> son hermanos entre sí.

Navegación por el DOM

JavaScript proporciona varias propiedades para navegar estas relaciones, permitiendo desplazarse entre nodos de manera eficiente.

ParentNode

La propiedad parentNode permite acceder al nodo padre del nodo actual. Es útil cuando se necesita navegar hacia arriba en el árbol DOM.

En este ejemplo, parentNode accede al elemento padre <ul> del <li> seleccionado y agrega un borde alrededor de toda la lista.

ChildNodes

La propiedad childNodes devuelve una colección de todos los nodos hijos de un elemento dado, incluidos los nodos de texto (espacios en blanco entre elementos).

Este ejemplo selecciona la lista de tareas y recorre sus hijos, agregando relleno a cada elemento <li>.

FirstChild y LastChild

firstChild: Accede al primer hijo de un elemento, incluyendo nodos de texto.
lastChild: Accede al último hijo de un elemento, incluyendo nodos de texto.

Supongamos que necesitamos resaltar el primer y el último elemento en un carrito de compras.

Este ejemplo resalta el primer y el último elemento en una lista, demostrando cómo acceder y modificar los primeros y últimos nodos.

Debido a que firstChild y lastChild suelen referirse a nodos de texto (como espacios en blanco) en lugar de los nodos de elemento reales (<li>), una mejor opción es utilizar firstElementChild y lastElementChild, que apuntan específicamente al primer y último elemento hijo, omitiendo cualquier nodo de texto.

PreviousSibling y NextSibling

nextSibling: Recupera el siguiente nodo hermano del nodo actual.
previousSibling: Recupera el nodo hermano anterior del nodo actual.

Considere navegar entre tareas en una lista de tareas, marcando tareas como "siguiente" o "completada previamente".

En este escenario:

• nextSibling avanza a la siguiente tarea y la marca como "siguiente";
• previousSibling marca la tarea anterior como completada.

Sin embargo, nextSibling y previousSibling a menudo apuntan a nodos de texto (como espacios en blanco). Para seleccionar los nodos de elemento reales (<li>), se debe usar nextElementSibling y previousElementSibling, que omiten específicamente los nodos de texto.

Ejemplo Práctico: Gestor de Tareas

Imagina que estamos construyendo un gestor de tareas donde los usuarios pueden agregar, resaltar y gestionar tareas. Queremos actualizar dinámicamente las tareas, marcar la primera tarea como "prioridad", resaltar la siguiente tarea como "próxima" y marcar la última tarea como "completada". Este ejemplo demostrará cómo navegar por el DOM utilizando parentNode, childNodes, firstElementChild, lastElementChild, nextElementSibling y previousElementSibling.

Cuando se hace clic en el botón "Resaltar Tareas", JavaScript aplica estilos distintos a las tareas según su posición. El firstElementChild marca la primera tarea como "Prioridad" con estilo en negrita y color amarillo. El lastElementChild marca la última tarea como "Completada" con efectos en verde y tachado. El nextElementSibling resalta la segunda tarea como "Próxima" en azul, y si existe un hermano anterior, este recibe un borde azul.