CodeAventura
JavaScript en el DOM
▸Recorrido y manipulación▸Recorrer el árbol DOM

Misión

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Recorrido DOM</title>
  </head>
  <body>
    <article id="card-producto">
      <h3 id="nombre-producto">Teclado mecánico</h3>
      <p>Switches rojos, retroiluminación y layout compacto.</p>
      <button>Comprar</button>
    </article>
    <p id="resumen-recorrido">Resumen pendiente</p>

    <script src="script.js"></script>
  </body>
</html>
●localhost:5173
04 / 16Recorrer el árbol DOM
Anterior

Recorrer el árbol DOM

El DOM es un mapa navegable

No siempre seleccionas todo desde cero. A veces ya tienes un nodo y necesitas moverte desde ahí, hacia arriba, hacia abajo o hacia el lado.

Imagina que ya tienes seleccionado el título de un producto. En lugar de volver a buscar toda la tarjeta desde document, puedes moverte desde ese título hasta los elementos relacionados.

Por eso existen las propiedades de recorrido:

  • parentElement — sube un nivel (padre)
  • children — baja (hijos directos, solo elementos)
  • nextElementSibling — te mueve al hermano siguiente
  • previousElementSibling — te mueve al hermano anterior

Subir: parentElement

Con parentElement subes un nivel en el árbol. Si el elemento no tiene padre (porque es <html>), devuelve null.

Bajar: children

children devuelve solo los elementos HTML directos (no nodos de texto). Es lo que normalmente quieres cuando manipulas la interfaz.

Moverse en horizontal: nextElementSibling

Si no hay hermano siguiente, devuelve null. Existe también previousElementSibling para ir hacia atrás.

Ejemplo completo

Cuándo usar recorrido y cuándo no

El recorrido es ideal cuando:

  • ya tienes una referencia y el elemento relacionado está cerca en la estructura
  • quieres código que no dependa de clases o ids concretos (más resistente a cambios)

Evítalo cuando:

  • la estructura HTML cambia frecuentemente
  • necesitas navegar muchos niveles (elemento.parentElement.parentElement.parentElement...)

En esos casos, un querySelector explícito es más claro y seguro.

Tu desafío 🚀

  1. Selecciona #nombre-producto
  2. Obtén su parentElement
  3. Obtén los children del article
  4. Obtén el nextElementSibling del título
  5. Usa esas referencias para actualizar #resumen-recorrido
  6. Haz visible un resumen del producto sin volver a buscar toda la tarjeta desde cero

En DOM no siempre buscas; muchas veces navegas.