Marc Semper Lloret
← El DOM: la web que responde

Sesión 1 · Semana 1

El DOM

Hoy · Hoja de ruta

  1. 1. Aprende: Qué es el DOM, por qué no es tu fichero HTML, y cómo se recorre.
  2. 2. Haz: Explora el DOM de tu propia web desde la consola.
  3. 3. Comprueba: Distingues lo que escribiste de lo que el navegador construyó.

Antes de empezar · 5 minutos, sin apuntes

  1. Cuando el navegador lee tu HTML, ¿qué crees que hace con él?
  2. Si cambias algo en la pestaña Elements, ¿cambia tu fichero?
  3. ¿Por qué crees que el código tiene que esperar a que el documento exista?

El documento, convertido en objetos

Cuando el navegador lee tu HTML construye en memoria un árbol de objetos: cada etiqueta pasa a ser un objeto con propiedades y métodos. Ese árbol es el DOM, y es lo que tu código manipula.

DOM · Document Object Model

La representación en memoria del documento. Tu fichero .html es el punto de partida; el DOM es lo que existe mientras la página está abierta, y puede acabar siendo muy distinto del fichero.

Del fichero a la pantalla
  1. Fichero HTML
  2. El navegador lo analiza
  3. Árbol DOM en memoria
  4. Se pinta en pantalla

Compruébalo: en la pestaña Elements borra un párrafo; desaparece de la pantalla, pero tu fichero sigue intacto. Recarga y vuelve. Lo que ves en Elements no es tu código, es el DOM.

En sentido inverso: si tu código crea diez artículos, aparecerán en Elements y no constarán en el archivo. Por eso, cuando en la semana 3 pintes el catálogo, «ver código fuente» no te servirá de nada: hay que mirar Elements.

El árbol y sus nodos

document                       // el documento entero
document.documentElement       // el elemento raíz
document.body                  // el cuerpo
document.title                 // el título de la pestaña

const main = document.querySelector("main");
main.children                  // sus elementos hijos
main.parentElement             // su contenedor
main.firstElementChild
main.nextElementSibling

Un detalle que confunde a todo el mundo: el DOM también guarda como nodos los espacios y saltos de línea entre etiquetas. Por eso usamos siempre las propiedades que hablan de elementos (children, firstElementChild) y no las que hablan de nodos en general (childNodes, firstChild).

Cuándo puede ejecutarse tu código

Si el código se ejecuta antes de que exista el documento, no encontrará nada:

const titulo = document.querySelector("h1");
console.log(titulo);      // null si el script se ejecutó demasiado pronto

Esto ya lo resolviste en la UD3: con defer, o con type="module", el navegador espera a tener el documento completo. Recuérdalo, porque el null de arriba es el error número uno de esta unidad.

Tarea 1 · Explora tu propia web

Desde la consola de tu página de productos:

  1. Cuenta cuántos enlaces hay: document.querySelectorAll("a").length.
  2. Obtén el texto del h1.
  3. Recorre las secciones y muestra su primer encabezado.
  4. Cambia el título de la pestaña y observa el efecto.
  5. Borra un elemento desde Elements y explica por qué el fichero no cambia.
  6. Dibuja en papel el árbol de las tres primeras ramas de tu página.
Objetivo mínimoRecorres el árbol desde la consola y explicas qué es el DOM.
Si lo tienesEscribe una función que imprima el árbol con sangría por niveles.
RetoExplica por qué childNodes devuelve más cosas de las que esperabas.

Checkpoint · fin de la sesión 1

  • Explicas la diferencia entre tu fichero y el DOM.
  • Te mueves por el árbol con las propiedades de elemento.
  • Sabes por qué el código debe esperar al documento.
  • Reconoces un null por selección prematura.

Antes de cerrar · 2 minutos, sin mirar

  1. ¿Qué es el DOM?
  2. ¿Por qué «ver código fuente» no muestra lo que crea tu código?
  3. ¿Qué devuelve una selección hecha antes de tiempo?
Ver respuestas

1 · El árbol de objetos que el navegador construye a partir del HTML y que existe mientras la página está abierta.

2 · Porque el código fuente es el fichero recibido, y lo que creas después solo existe en el DOM: se ve en Elements.

3 · null, porque el elemento aún no existía.