Recorrido de padres, hijos y hermanos
Recorra el árbol DOM entre nodos relacionados.
Recorrido de padres, hijos y hermanos es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.
Por qué recorrer el DOM
Una vez que tiene un elemento, a menudo necesita acceder a sus elementos relacionados: el contenedor que lo rodea, los elementos que contiene o el elemento que está justo a su lado. Las propiedades de recorrido del DOM le permiten desplazarse por el árbol.
parentElement
parentElement le proporciona el elemento que contiene al actual, o null en la parte superior del árbol.
const item = document.querySelector(".item");
const container = item.parentElement;
console.log(container.className);children
children es una HTMLCollection viva de los elementos secundarios directos de un elemento (se excluyen los nodos de texto).
const list = document.querySelector("ul");
console.log(list.children.length);firstElementChild y lastElementChild
Estas propiedades llevan directamente al primer o al último elemento secundario, omitiendo los nodos de texto y de comentarios.
const list = document.querySelector("ul");
console.log(list.firstElementChild.textContent);
console.log(list.lastElementChild.textContent);nextElementSibling
nextElementSibling devuelve el elemento situado inmediatamente después del actual dentro del mismo elemento principal.
const current = document.querySelector("li.active");
const after = current.nextElementSibling;previousElementSibling
previousElementSibling se desplaza en la dirección opuesta. Ambos devuelven null cuando no existe ningún elemento hermano.
const current = document.querySelector("li.active");
const before = current.previousElementSibling;Propiedades de elementos frente a propiedades de nodos
Tenga cuidado: childNodes, nextSibling y parentNode incluyen nodos de texto (espacios en blanco). Por lo general, las versiones *Element* son las que necesita.
list.childNodes; // includes whitespace text nodes
list.children; // only elementsclosest
closest recorre el árbol hacia arriba desde el elemento actual y devuelve el ancestro más cercano (o el propio elemento) que coincida con un selector.
const btn = document.querySelector(".delete");
const row = btn.closest("tr");closest para la delegación de eventos
closest es perfecto cuando un clic recae sobre un elemento interno, pero necesita el contenedor externo que lo gestiona.
function onClick(e) {
const card = e.target.closest(".card");
if (card) {
console.log(card.dataset.id);
}
}matches
matches comprueba si el propio elemento cumple un selector y devuelve un booleano. Resulta práctico junto con el recorrido.
const el = document.querySelector(".item");
console.log(el.matches(".item.active"));Combinar recorridos
Puede encadenar pasos de recorrido para desplazarse por estructuras complejas, por ejemplo, desde un botón hasta su fila y luego hasta la fila siguiente.
const next = btn.closest("tr").nextElementSibling;Comprobación rápida
Elija la propiedad correcta.
Repaso
Puede desplazarse hacia arriba con parentElement y closest, hacia los elementos secundarios con children, firstElementChild y lastElementChild, y lateralmente con nextElementSibling y previousElementSibling. Prefiera las propiedades que solo consideran elementos para omitir los nodos de texto correspondientes a espacios en blanco.
Preguntas frecuentes
¿La lección «Recorrido de padres, hijos y hermanos» es gratis?
Sí — el texto completo de «Recorrido de padres, hijos y hermanos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Recorrido de padres, hijos y hermanos»?
Recorra el árbol DOM entre nodos relacionados. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar JavaScript Academy?
No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Recorrido de padres, hijos y hermanos»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?
Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Selección de elementos con querySelector
- getElementById y getElementsByClassName
- Recorrido de padres, hijos y hermanos
- NodeList frente a HTMLCollection