El DOM Traversing son una serie de propiedades que nos da el API del DOM para, tomando como referencia un nodo, poder recorrer diferentes elementos.
Nota: todos los métodos que vamos a ver son para los elementos.
Como vimos en capítulos anteriores, hay diferentes tipos de nodos, podemos verlos pinchando aquí. Recordamos que hay 12 tipos de nodos diferentes, uno de ellos son los elementos, que es lo que hemos estado viendo hasta ahora, que son las etiquetas HTML, tenemos nodos de texto, nodos de comentarios, nodos de fragmentos…
El DOM Traversing que vamos a ver es el enfocado a los elementos, es decir, a las etiquetas HTML como tal.
Ejm
Vamos a trabajar sobre un ejm para entender el funcionamiento.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DOM Traversing</title>
<style>
:root {
--yellow-color: #f7df1e;
--dark-color: #222;
}
.cards {
border: thin solid var(--dark-color);
padding: 1rem;
}
.card {
display: inline-block;
background-color: var(--dark-color);
color: var(--yellow-color);
}
.card figcaption {
padding: 1rem;
}
.rotate-45 {
transform: rotate(45deg);
}
</style>
</head>
<body>
<h1>DOM Traversing</h1>
<section class="cards">
<figure class="card">
<img src="tech.jpg" alt="Tech" />
<figcaption>Tech</figcaption>
</figure>
<figure class="card">
<img src="animals.avif" alt="Animals" />
<figcaption>Animals</figcaption>
</figure>
<figure class="card">
<img src="people.avif" alt="People" />
<figcaption>People</figcaption>
</figure>
<figure class="card">
<img src="arch.webp" alt="Arch" />
<figcaption>Arch</figcaption>
</figure>
<figure class="card">
<img src="nature.jpg" alt="Nature" />
<figcaption>Nature</figcaption>
</figure>
</section>
<script>
const $cards = document.querySelector(".cards");
// Hijos de la clase .cards
// Devuelve un tipo de dato HTMLCollection console.log($cards.children);
// Acceder a un hijo en particular (el tercero) console.log($cards.children[2]);
// Padre de la clase .cards console.log($cards.parentElement);
// Primer elemento hijo console.log($cards.firstElementChild);
// Último elemento hijo console.log($cards.lastElementChild);
// Hermano que está antes console.log($cards.previousElementSiblint)
// Hermano que está después console.log($cards.nextElementSibling)
// Padre más cercano del tipo de selector que pasemos
// Mostrará el div más cercano console.log($cards.closest("div"));
console.log($cards);
</script>
</body>
</html>Resumen
- children: para ver los elementos hijos.
- parentElement: para ver el elemento padre.
- firstElementChild: hace referencia al primer elemento hijo
- lastElementChild: hace referencia al último elemento hijo
- previousElementSibling: hace referencia al hermano que está antes
- nextElementSibling: hace referencia al heramno que está después
- closest(«selector»): mostrará el elemento más cercano al tipo de selector que estemos pasando