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.
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
firstElementChild
sería un acceso rápido a children[0]
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.
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.
Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.
Puedes encontrar más sobre mi en Manz.dev