El árbol DOM

1 // Del HTML al árbol

Cuando el navegador recibe un documento HTML, lo analiza y crea un objeto por cada etiqueta, cada fragmento de texto y cada comentario. Esos objetos se llaman nodos y se organizan en un árbol que refleja cómo están anidadas las etiquetas:

<body>
  <header>
    <h1>Tareas</h1>
  </header>
  <ul id="lista">
    <li class="hecha">Comprar</li>
    <li>Estudiar</li>
  </ul>
</body>

Hay varios tipos de nodos, pero dos son los que vas a manejar a diario:

• Nodos elemento: uno por etiqueta (<ul>, <li>, <button>). Tienen atributos, clases y pueden tener hijos.
• Nodos de texto: el contenido textual. No tienen hijos y, como detalle curioso, los espacios y saltos de línea entre etiquetas también generan nodos de texto.

La raíz del árbol es el objeto global document. Desde él se llega a todo lo demás: document.documentElement es <html>, document.head y document.body son lo que su nombre indica.

2 // Seleccionar elementos

Antes de cambiar nada hay que encontrar el nodo. La forma moderna es usar selectores CSS, los mismos que ya escribes en las hojas de estilo:

const lista = document.querySelector('#lista');          // por id
const primera = document.querySelector('.hecha');         // primera coincidencia
const tareas = document.querySelectorAll('#lista li');     // todas las coincidencias
const campo = document.querySelector('input[name="email"]'); // por atributo

querySelector y querySelectorAll también existen sobre cualquier elemento, no sólo sobre document. Así la búsqueda se limita a sus descendientes: lista.querySelectorAll('li') sólo busca dentro de la lista.

La NodeList que devuelve querySelectorAll se parece a un array: tiene length, se puede recorrer con for...of y tiene forEach. Pero no tiene map ni filter. Si los necesitas, conviértela primero:

const textos = Array.from(tareas).map(li => li.textContent);
// o bien: [...tareas].map(li => li.textContent)

3 // Moverse por el árbol

A veces no buscas desde arriba, sino a partir de un elemento que ya tienes: el botón que se ha pulsado, la fila de una tabla, un campo de un formulario. Cada nodo conoce a su familia:

Fíjate en que todas llevan la palabra Element. Existen versiones sin ella (childNodes, firstChild, nextSibling) que incluyen los nodos de texto, así que te devolverían los saltos de línea entre etiquetas. Salvo que trabajes con texto a propósito, usa las versiones con Element.

De todas, closest es la más útil en la práctica, porque no depende de cuántos niveles haya en medio: sube desde el elemento hasta encontrar el que buscas.

<article class="tarjeta" data-id="42">
  <h2 class="nombre">Teclado mecánico</h2>
  <div class="acciones">
    <button class="anadir">Añadir</button>
  </div>
</article>

4 // Para practicar

Dos páginas para practicar la selección y el recorrido del árbol, sin modificar nada todavía. Cada ejercicio trae el enunciado en los comentarios del código.