En algunas ocasiones en las que conocemos y controlamos perfectamente la estructura del código HTML de la página, nos puede resultar más cómodo o interesante utilizar una forma de navegar por la jerarquía de elementos HTML.
Por ejemplo, acceder al elemento que está a continuación de otro elemento del DOM, o acceder al último elemento de una estructura contenedora.
¡Alto! Mucho cuidado con esta estrategia de moverse de forma jerárquica. En general, suele ser una mala opción porque si la estructura DOM cambia, nuestro código dejaría de funcionar correctamente. Úsalo sólo si tu DOM es una estructura sólida que no cambia y conoces perfectamente.
Navegar a través de elementos
Las propiedades que veremos a continuación devuelven información de otros elementos relacionados con el elemento en cuestión. En este caso estamos trabajando con el tipo
| Propiedades de elementos HTML | Descripción | Si está vacío... |
|---|---|---|
.children | Devuelve una lista de elementos HTML hijos. | [] |
.parentElement | Devuelve el padre del elemento. | |
.firstElementChild | Devuelve el primer elemento hijo. | |
.lastElementChild | Devuelve el último elemento hijo. | |
.previousElementSibling | Devuelve el elemento hermano anterior. | |
.nextElementSibling | Devuelve el elemento hermano siguiente. |
En primer lugar, tenemos la propiedad children que nos ofrece un
- La propiedad
firstElementChildsería un acceso rápido achildren[0] - La propiedad
lastElementChildsería un acceso rápido al último elemento hijo.
Por último, tenemos las propiedades previousElementSibling y nextElementSibling que nos devuelven los elementos hermanos anteriores o posteriores, respectivamente. La propiedad parentElement nos devolvería el padre del elemento en cuestión. En el caso de no existir alguno de estos elementos, nos devolvería
Observa el siguiente código HTML. Si trabajamos bajo este documento HTML, y utilizamos el siguiente código Javascript, podremos «navegar» por la jerarquía de elementos, moviéndonos entre elementos padre, hijo o hermanos:
// Trabajando sobre <body>
document.body.children.length; // 1
document.body.children; // <div id="app">
document.body.parentElement; // <html>
const app = document.querySelector("#app");
app.children; // [div.header, p, a]
app.firstElementChild; // <div class="header">
app.lastElementChild; // <a href="/">
const a = app.querySelector("a");
a.previousElementSibling; // <p>
a.nextElementSibling; // null<html>
<body>
<div id="app">
<div class="header">
<h1>Titular</h1>
</div>
<p>Párrafo de descripción</p>
<a href="/">Enlace</a>
</div>
</body>
</html>Estas son las propiedades más habituales para navegar entre elementos HTML, sin embargo, tenemos otra modalidad un poco más detallada.
En esta modalidad, cuando hablamos de
trabajamos a nivel de .
Buscar elementos desde otros
Existen algunos métodos interesantes para encontrar elementos desde otros elementos. Los métodos que mencionamos son los siguientes:
| Métodos | Descripción | Si no lo encuentra... |
|---|---|---|
.matches(sel) | Comprueba si un elemento coincide con una selección CSS. | false |
.closest(sel) | Devuelve el primer elemento más cercano que coincide con selector. |
El método matches()
El método matches() nos permite comprobar si un elemento coincide con un selector CSS indicado por parámetro. El método devuelve true si el elemento coincide con el selector indicado. Si no lo encuentra, devuelve false.
const container = document.querySelector(".container");
const sandbox = document.querySelector(".sandbox");
container.matches(".container"); // true
sandbox.matches(".container .sandbox"); // true (detecta ancestros)<div class="container">
<div class="sandbox"></div>
</div>El método closest()
El método closest() nos permite encontrar el primer elemento más cercano que coincide con un selector CSS indicado por parámetro. Si no lo encuentra devuelve
const item3 = document.querySelector(".item-3");
item3.closest(".container"); // <div class="container"></div>
item3.closest(".subitem"); // null<div class="container">
<div class="sandbox">
<div class="item item-1"></div>
<div class="item item-2"></div>
<div class="item item-3">
<div class="subitem"></div>
</div>
</div>
</div>Observa que el método closest() busca elementos en dirección hacia el padre, devolviendo el más cercano, pero nunca hacia los elementos hijos.
Navegar a través de nodos
Si queremos hilar más fino, podemos trabajar a nivel de elementos de tipo
| Propiedades de nodos HTML | Descripción | Si está vacío... |
|---|---|---|
.childNodes | Devuelve una lista de nodos hijos (incluye nodos de texto y comentarios). | |
.parentNode | Devuelve el nodo padre del nodo. | |
.firstChild | Devuelve el primer nodo hijo. | |
.lastChild | Devuelve el último nodo hijo. | |
.previousSibling | Devuelve el nodo hermano anterior. | |
.nextSibling | Devuelve el nodo hermano siguiente. |
Estas propiedades suelen ser más interesantes cuando queremos trabajar sobre nodos de texto, ya que incluso los espacios en blanco entre elementos HTML influyen. Volvamos a trabajar sobre el documento HTML anterior, pero ahora utilizando este grupo de propiedades basadas en
// Trabajando sobre <body>
document.body.childNodes.length; // 3
document.body.childNodes; // [text, div#app, text]
document.body.parentNode; // <html>
const app = document.querySelector("#app");
app.childNodes; // [text, div.header, text, p, text, a, text]
app.firstChild.textContent; // " "
app.lastChild.textContent; // " "
const a = app.querySelector("a");
a.previousSibling; // #text
a.nextSibling; // #text<html>
<body>
<div id="app">
<div class="header">
<h1>Titular</h1>
</div>
<p>Párrafo de descripción</p>
<a href="/">Enlace</a>
</div>
</body>
</html>Con todo esto, ya tenemos suficientes herramientas para trabajar a bajo nivel con las etiquetas y nodos HTML de un documento HTML desde Javascript.
En esta modalidad, cuando hablamos de
trabajamos a nivel de .
