Navegar por elementos del DOM

Moverse por la estructura de elementos HTML

/ ᐳ javascript ᐳ La API classList de Javascript ᐳ Navegar por elementos del DOM ᐳ ¿Qué son los eventos?

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 si no tiene.
firstElementChild Devuelve el primer elemento hijo.
lastElementChild Devuelve el último elemento hijo.
previousElementSibling Devuelve el elemento hermano anterior o si no tiene.
nextElementSibling Devuelve el elemento hermano siguiente o si no tiene.

En primer lugar, tenemos la propiedad children que nos ofrece un con una lista de elementos HTML hijos. Podríamos acceder a cualquier hijo utilizando los corchetes de array y seguir utilizando otras propiedades en el hijo seleccionado.

  • La propiedad firstElementChild sería un acceso rápido a children[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.

La primera tabla que hemos visto nos muestra una serie de propiedades cuando trabajamos con . Sin embargo, si queremos hilar más fino y trabajar a nivel de , podemos utilizar las siguientes propiedades, que son equivalentes a las anteriores:

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 si no tiene.
firstChild Devuelve el primer nodo hijo.
lastChild Devuelve el último nodo hijo.
previousSibling Devuelve el nodo hermano anterior o si no tiene.
nextSibling Devuelve el nodo hermano siguiente o si no tiene.

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.

Volver Al índice
Acceder a Discord Comunidad de Manz.dev

Relacionados

Videos que podrían interesarte...

¡Crea tus PROPIAS ETIQUETAS HTML sin FRAMEWORKS! Cómo CLONAR objetos en Javascript correctamente (structuredClone) Cambiar clases CSS desde Javascript con classList

¿Quién soy yo?

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