Técnicas eficientes para recorrer el DOM
Domine métodos como .closest(), .siblings(), .find() y .parentsUntil() para recorrer eficazmente el árbol DOM y evitar cuellos de botella de rendimiento.
Técnicas eficientes para recorrer el DOM es una lección gratuita de jQuery Academy en CoddyKit. Esta es la lección 3 de 3. 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 jQuery Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de jQuery Academy incluye 3 lecciones en total.
Navegar por el árbol del DOM
¡Bienvenido! En esta lección, dominará técnicas eficientes para desplazarse por el Document Object Model (DOM).
El DOM es como un árbol genealógico de los elementos de su página web. Comprender cómo recorrerlo le permite seleccionar elementos con precisión, incluso sin identificadores ni clases directos.
- Recorrer: moverse o desplazarse por algo.
- DOM: representación interna que hace el navegador de la estructura HTML.
Encontrar descendientes con .find()
El método .find() es perfecto para localizar elementos descendientes. Busca *dentro* de los elementos seleccionados actualmente cualquier coincidencia.
Considérelo como buscar objetos específicos dentro de una caja concreta. Es muy útil para acotar la búsqueda.
- Sintaxis:
$(selector).find(filterSelector) - Devuelve: un nuevo objeto jQuery que contiene los descendientes encontrados.
.find() en acción
Busquemos todos los elementos de lista (<li>) dentro de una lista no ordenada específica (<ul>).
Ejecute el código y compruebe qué elementos obtienen un fondo verde.
<div id="container">
<ul id="myList">
<li>Item 1</li>
<li class="active">Item 2</li>
<li>Item 3</li>
</ul>
<p>Some other text</p>
<ul id="anotherList">
<li>Item A</li>
<li>Item B</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// Find all <li> elements within #myList
$('#myList').find('li').css('background-color', 'lightgreen');
// You can also chain with specific selectors
$('#myList').find('.active').css('font-weight', 'bold');
});
</script>Subir con .closest()
A veces necesita encontrar un antepasado (un elemento padre, abuelo, etc.) de un elemento. El método .closest() hace exactamente eso.
Comienza en el elemento actual y recorre *hacia arriba* el árbol del DOM, devolviendo el *primer* antepasado que coincide con el selector proporcionado.
- Sintaxis:
$(selector).closest(filterSelector) - Devuelve: un objeto jQuery que contiene el antepasado más cercano.
.closest() en acción
Imagine que hace clic en un botón situado en lo más profundo de una estructura anidada. Desea encontrar su contenedor principal. .closest() es perfecto para esto.
Haga clic en el botón de abajo para resaltar su antepasado <div> más cercano.
<div class="grandparent">
<div class="parent">
<p>Some text here</p>
<button id="myButton">Click Me</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#myButton').on('click', function() {
// Find the closest ancestor div and add a border
$(this).closest('div').css('border', '2px solid blue');
});
});
</script>Explorar hermanos con .siblings()
Los elementos que se encuentran en el mismo nivel del árbol del DOM se denominan «hermanos». El método .siblings() le ayuda a seleccionarlos todos.
Encuentra todos los elementos que comparten el mismo padre que el elemento actual, *exceptuando* el propio elemento actual.
- Sintaxis:
$(selector).siblings(filterSelector) - Devuelve: un nuevo objeto jQuery con todos los elementos hermanos.
.siblings() en acción
Resaltemos todos los hermanos de un elemento de lista específico al hacer clic en él. Esto resulta útil para listas o menús interactivos.
¡Haga clic en cualquier elemento de la lista para ver cómo cambian de color sus hermanos!
<ul id="menu">
<li>Home</li>
<li class="current">About</li>
<li>Services</li>
<li>Contact</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#menu li').on('click', function() {
// Remove highlight from previously selected siblings
$('#menu li').css('background-color', '');
// Highlight the clicked item's siblings
$(this).siblings().css('background-color', 'lightyellow');
// Highlight the clicked item itself (optional)
$(this).css('background-color', 'lightblue');
});
});
</script>Recorrer hacia arriba con .parentsUntil()
¿Qué ocurre si desea seleccionar *varios* antepasados, pero detenerse en un punto determinado? Ahí es donde resulta útil .parentsUntil().
Este método recorre el árbol del DOM hacia arriba y selecciona todos los antepasados del elemento actual *hasta* llegar a un elemento especificado por el selector. El propio elemento de «detención» no se incluye.
- Sintaxis:
$(selector).parentsUntil(stopSelector, filterSelector) - Devuelve: un objeto jQuery con los antepasados seleccionados.
.parentsUntil() en acción
Tenemos una estructura profundamente anidada. Seleccionemos todos los elementos padre de un <span> hasta llegar a un <div class="container"> específico.
Ejecute este ejemplo para ver qué elementos obtienen un borde, pero observe que el propio div «container» se omite.
<div class="body-wrapper">
<div class="container">
<div class="row">
<section>
<article>
<p>Hello <span>World!</span></p>
</article>
</section>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// Find all parents of 'span' until the '.container' div
$('span').parentsUntil('.container').css('border', '1px dashed orange');
});
</script>Comprobación rápida
Tiene un elemento <img> anidado dentro de un <div class="gallery-item">, que a su vez está dentro de un <div class="gallery-row">. Si selecciona el <img>, ¿qué método de jQuery utilizaría para obtener *únicamente* el <div class="gallery-item">?
Repaso: recorrido eficiente del DOM
¡Excelente trabajo! Ha dominado métodos clave de jQuery para recorrer el DOM de forma eficiente:
.find(): busca *dentro* de los elementos para encontrar descendientes..closest(): encuentra el *antepasado más cercano* que coincide con un selector al subir por el árbol..siblings(): selecciona todos los elementos que están en el *mismo nivel* que el actual, sin incluirlo..parentsUntil(): selecciona varios antepasados *hasta* un elemento de detención especificado, sin incluirlo.
Utilizar estos métodos correctamente le ayuda a escribir código jQuery más preciso, eficiente y legible para aplicaciones web dinámicas.
Preguntas frecuentes
¿La lección «Técnicas eficientes para recorrer el DOM» es gratis?
Sí — el texto completo de «Técnicas eficientes para recorrer el DOM» 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 jQuery Academy, actualiza a CoddyKit PRO. El curso de jQuery Academy incluye 3 lecciones en total.
¿Qué aprenderé en «Técnicas eficientes para recorrer el DOM»?
Domine métodos como .closest(), .siblings(), .find() y .parentsUntil() para recorrer eficazmente el árbol DOM y evitar cuellos de botella de rendimiento. Practicas jQuery 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 jQuery Academy?
No se requiere experiencia previa. jQuery 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 3.
¿Cuánto tiempo toma la lección «Técnicas eficientes para recorrer el DOM»?
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 jQuery Academy?
Sí. Cada lección de jQuery 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
- Selectores de atributos avanzados
- Pseudoclases y selectores personalizados
- Técnicas eficientes para recorrer el DOM