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 tener a nuestra disposición una serie de propiedades para navegar por la jerarquía de elementos HTML relacionados.
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.
Propiedades de elementos HTML | Descripción |
---|---|
children | Devuelve una lista de elementos HTML hijos. |
parentElement | Devuelve el padre del elemento o |
firstElementChild | Devuelve el primer elemento hijo. |
lastElementChild | Devuelve el último elemento hijo. |
previousElementSibling | Devuelve el elemento hermano anterior o |
nextElementSibling | Devuelve el elemento hermano siguiente o |
En primer lugar, tenemos la propiedad children
que nos ofrece un
- La propiedad
firstElementChild
sería un acceso rápido achildren[0]
- La propiedad
lastElementChild
serí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
Consideremos el siguiente documento HTML:
<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>
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:
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
Estas son las propiedades más habituales para navegar entre elementos HTML, sin embargo, tenemos otra modalidad un poco más detallada.
Navegar a través de nodos
La primera tabla que hemos visto nos muestra una serie de propiedades cuando trabajamos con
Propiedades de nodos HTML | Descripción |
---|---|
childNodes | Devuelve una lista de nodos hijos. Incluye nodos de texto y comentarios. |
parentNode | Devuelve el nodo padre del nodo o |
firstChild | Devuelve el primer nodo hijo. |
lastChild | Devuelve el último nodo hijo. |
previousSibling | Devuelve el nodo hermano anterior o |
nextSibling | Devuelve el nodo hermano siguiente o |
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
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
Con todo esto, ya tenemos suficientes herramientas para trabajar a bajo nivel con las etiquetas y nodos HTML de un documento HTML desde Javascript.