Navegar por elementos del DOM

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.

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Autor de Emezeta.com, es profesor en la Universidad de La Laguna y dirige el curso de Programación web FullStack y Diseño web FrontEnd de EOI en Tenerife (Canarias). En sus ratos libres, busca GIF de gatos en Internet.