Comprendiendo el Modelo de Objetos del Documento (DOM) - Aprender JavaScript

El Modelo de Objetos del Documento (DOM) es un pilar fundamental del desarrollo web, que actúa como puente entre el contenido de una página (HTML), su presentación (CSS) y su comportamiento interactivo (JavaScript). Este artículo profundiza en la naturaleza del DOM, su relación con HTML y CSS, y cómo los navegadores lo construyen para renderizar una página web.

¿Qué es el DOM?

El DOM es una interfaz de programación implementada por los navegadores que permite a los scripts leer, manipular y modificar el contenido, la estructura y el estilo de un sitio web de forma dinámica. Representa una página web como un árbol de objetos, donde cada nodo corresponde a una parte del documento: un elemento, un atributo, un fragmento de texto o un comentario. El DOM no forma parte de las especificaciones de HTML ni de JavaScript; es construido por el navegador según la especificación del DOM estandarizada por el WHATWG y el World Wide Web Consortium (W3C).

Una forma útil de pensarlo: el archivo HTML es la receta, y el DOM es el plato en vivo que el navegador sirve realmente. Una vez que el análisis termina, el texto HTML deja de existir — tu JavaScript siempre habla únicamente con el DOM. Por eso document.body.innerHTML = '...' cambia la página pero nunca reescribe el archivo .html original en disco.

Cómo se mapea HTML a un árbol DOM

Considera este pequeño fragmento de marcado:

<body>
  <h1>Hello</h1>
  <p>A <em>short</em> note.</p>
</body>

El navegador lo convierte en un árbol donde cada etiqueta se convierte en un nodo de elemento y cada tramo de texto se convierte en un nodo de texto:

HTMLBodyElement (body)
├── HTMLHeadingElement (h1)
│   └── #text "Hello"
└── HTMLParagraphElement (p)
    ├── #text "A "
    ├── HTMLElement (em)
    │   └── #text "short"
    └── #text " note."

Observa que los espacios en blanco y el texto entre etiquetas también se convierten en nodos reales — una sorpresa común cuando esperas que firstChild sea el <h1> pero obtienes un nodo de texto en su lugar. Para aprender cómo el navegador categoriza cada tipo de nodo, consulta Comprendiendo los nodos del DOM y Propiedades de los nodos: tipo, etiqueta y contenidos.

Explora nuestras secciones de JavaScript DOM

Este capítulo es el punto de entrada a una serie completa sobre el trabajo con el DOM en JavaScript. Cada tema a continuación enlaza a un capítulo dedicado:

Comprendiendo los nodos del DOM — los bloques de construcción fundamentales del DOM y cómo están estructurados.
Seleccionando elementos del DOM — métodos para encontrar elementos, incluidos getElement* y querySelector.
Manipulando el DOM — agregar, eliminar y modificar elementos para construir páginas dinámicas.
Trabajando con estilos en el DOM — aplicar y leer estilos CSS mediante JavaScript.
Manejo de eventos en el DOM — responder a las interacciones del usuario de forma eficiente.
Recorriendo el DOM — navegar por el árbol para llegar a nodos padres, hijos y hermanos.
Técnicas de manipulación del DOM — DocumentFragments, clonación de nodos y agrupación de actualizaciones.
Trabajando con formularios — leer entradas, validación y manejo de envíos.
Técnicas avanzadas del DOM — manipulaciones complejas y optimizaciones.
Librerías de manipulación del DOM — librerías como jQuery que simplifican tareas comunes.
Compatibilidad del DOM con navegadores — mantener las manipulaciones consistentes entre navegadores.
Consideraciones de accesibilidad del DOM — mejores prácticas para páginas accesibles.
Depuración y herramientas — inspeccionar y solucionar problemas del DOM.
Optimización del rendimiento — estrategias para actualizaciones rápidas y fluidas.
Elementos interactivos y widgets — construcción de componentes interactivos atractivos.

Relación entre HTML, CSS y el DOM

HTML, CSS y el DOM interactúan estrechamente para mostrar una página web:

HTML proporciona la estructura básica de las páginas, que luego se representa como el árbol del DOM.
CSS se utiliza para controlar el diseño y la apariencia de los elementos dentro del DOM. El navegador analiza los estilos en un CSSOM (CSS Object Model), que se combina con el DOM para construir el árbol de renderizado. Cuando los estilos cambian, el navegador recalcula los estilos calculados y actualiza el árbol de renderizado en consecuencia, reflejando los cambios de estilo.
JavaScript usa el DOM para interactuar con y modificar el HTML y CSS, permitiendo cambios dinámicos en el contenido y el estilo de la página.

El proceso es simbiótico: HTML se transforma en el DOM, CSS da estilo al DOM y JavaScript manipula el DOM, lo que actualiza lo que el usuario ve en pantalla.

Cómo el navegador construye el DOM

El proceso de construcción del DOM es una parte fundamental de cómo los navegadores web interpretan el HTML y CSS de una página web y los convierten en una visualización visible e interactiva. Así es como suele desarrollarse este proceso:

Análisis del HTML: El navegador analiza el código fuente HTML de una página web. Durante este proceso de análisis, el navegador identifica elementos como etiquetas, atributos y su contenido de texto. Cada elemento, atributo y fragmento de texto se convierte en parte del árbol del DOM como un nodo.
Construcción del árbol DOM: A medida que se analiza el HTML, el navegador construye un árbol DOM donde cada nodo representa un object en el documento. Esta estructura de árbol refleja la estructura HTML pero permite que lenguajes de programación como JavaScript interactúen con los elementos de la página de forma programática.
Construcción del árbol de renderizado: Paralelamente a la construcción del árbol DOM, el navegador construye un árbol de renderizado, que combina los elementos del DOM con sus estilos CSS correspondientes. A diferencia del árbol DOM, el árbol de renderizado no incluye elementos no visuales como las etiquetas <script> o elementos con display: none;.
Diseño: Una vez que se construye el árbol de renderizado, el navegador calcula el diseño, determinando la posición y el tamaño exactos de cada object en la pantalla.
Pintura: El paso final implica la pintura del árbol de renderizado en la pantalla. Este paso traduce los nodos del árbol de renderizado en píxeles reales en la pantalla, mostrando efectivamente la página web.

Ejemplo práctico: Construyendo y dando estilo a una página web

Aquí hay un ejemplo HTML simple que demuestra la interacción entre HTML, CSS y el DOM:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Sample DOM Page</title>
    <style>
        #container {
            border: 2px solid black;
            padding: 20px;
            margin-top: 20px;
        }
        h1 {
            color: navy;
        }
        p {
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div id="container">
        <h1>Welcome to Our Website</h1>
        <p>This is a sample paragraph to demonstrate the DOM in action.</p>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const heading = document.querySelector('h1');
            heading.style.backgroundColor = 'yellow';
        });
    </script>
</body>
</html>

Pruébalo tú mismo »

Explicación del ejemplo

Estructura HTML: Este documento HTML define la estructura de la página, incluido un contenedor div que contiene un encabezado y un párrafo.
Estilos CSS: Los estilos CSS en línea dan estilo al contenedor, al encabezado y al párrafo, demostrando cómo CSS afecta la apariencia de los elementos HTML.
Interacción con JavaScript: Un script en línea espera a que el DOM se cargue y luego modifica el color de fondo del encabezado a amarillo. Esta interacción muestra cómo JavaScript puede manipular el DOM después de que ha sido construido por el navegador.

Leyendo el árbol desde JavaScript

No necesitas un navegador para razonar sobre el DOM como una estructura de datos — es simplemente un grafo de objetos. El fragmento a continuación construye un pequeño árbol de objetos simples que refleja la forma del DOM (hijos, nombres de etiquetas, texto) y lo recorre para contar los nodos de elemento, exactamente como lo haría querySelectorAll('*').length en un navegador:

// A minimal model of a DOM subtree.
const tree = {
  tag: 'body',
  children: [
    { tag: 'h1', children: [{ text: 'Hello' }] },
    {
      tag: 'p',
      children: [
        { text: 'A ' },
        { tag: 'em', children: [{ text: 'short' }] },
        { text: ' note.' },
      ],
    },
  ],
};

function countElements(node) {
  // A node is an "element" when it has a tag; text nodes only have `text`.
  let count = node.tag ? 1 : 0;
  for (const child of node.children ?? []) {
    count += countElements(child);
  }
  return count;
}

console.log(countElements(tree)); // 4

El árbol contiene cuatro nodos de elemento (body, h1, p, em); las cadenas de texto simples son nodos de texto y no se cuentan. Este descenso recursivo es la misma idea detrás del recorrido real del DOM — consulta Recorriendo el DOM para las APIs del navegador (childNodes, firstElementChild, parentNode y similares).

Errores comunes

El texto y los espacios en blanco también son nodos. element.childNodes incluye nodos de texto para los saltos de línea y espacios entre etiquetas. Usa children o firstElementChild cuando solo quieras elementos.
Ejecuta los scripts después de que el DOM exista. Un <script> en el <head> se ejecuta antes de que se analice el cuerpo, por lo que document.querySelector('h1') devuelve null. Espera a DOMContentLoaded, coloca el script al final del <body> o agrega el atributo defer.
innerHTML no es gratis. Asignar a innerHTML vuelve a analizar la cadena y reconstruye todo ese subárbol, descartando los nodos existentes y sus oyentes de eventos. Para cambios de texto pequeños, prefiere textContent; para cambios estructurales considera DocumentFragments.
El DOM está vivo, la fuente HTML no. Editar el DOM nunca cambia el archivo HTML original, y "Ver fuente" muestra el archivo tal como fue entregado, no el DOM actual. Usa el panel Elementos del navegador para inspeccionar el árbol en vivo.

Información

Para optimizar las interacciones web, familiarízate con las propiedades de los nodos del DOM. Comprender los diferentes tipos de nodos, como elementos y texto, mejora tu capacidad para escribir JavaScript efectivo y orientado para la manipulación dinámica de contenido web.

Conclusión

Comprender el DOM es esencial para cualquier desarrollador web. Proporciona los medios para acceder y actualizar dinámicamente el contenido, la estructura y el estilo de una página web. Al dominar cómo el DOM interactúa con HTML y CSS, los desarrolladores pueden crear aplicaciones web más eficientes y dinámicas. Este conocimiento fundamental es crucial para manipular el contenido web y crear sitios web interactivos y dinámicos.

Práctica

¿Qué papel desempeña JavaScript con el Modelo de Objetos del Documento (DOM)?

JavaScript se usa para aplicar estilos CSS al DOM.JavaScript puede manipular el DOM para agregar, cambiar o eliminar elementos y atributos HTML.JavaScript se usa para almacenar y recuperar datos en el DOM.JavaScript puede cambiar todos los elementos HTML de la página a través del DOM.JavaScript se usa para manejar eventos en elementos HTML.JavaScript no puede cambiar el contenido de los elementos HTML.