¿Qué es el DOM?

Estructura de objetos HTML en un documento web


Cuando comenzamos en el mundo del desarrollo web, normalmente comenzamos por aprender a escribir etiquetado o marcado HTML y además, añadir estilos CSS para darle color, forma y algo de interacción. Sin embargo, a medida que avanzamos, nos damos cuenta que en cierta forma podemos estar bastante limitados.

Si únicamente utilizamos HTML/CSS, sólo podremos crear páginas «estáticas», es decir, páginas que no pueden mostrarse de una forma diferente dependiendo de acciones del usuario. Si añadimos Javascript, podremos crear páginas «dinámicas», es decir, aprovechar la potencia y flexibilidad que nos da un lenguaje de programación para crear documentos y páginas mucho más ricas, con una experiencia más completa y con las que se pueden automatizar un gran abanico de tareas y acciones.

¿Qué es el DOM?

Las siglas DOM significan Document Object Model, o lo que es lo mismo, la estructura del documento HTML. Una página HTML está formada por múltiples etiquetas HTML, anidadas una dentro de otra, formando un árbol de etiquetas relacionadas entre sí, que se denomina árbol DOM (o simplemente DOM).

¿Qué es el DOM?

En Javascript, cuando nos referimos al DOM nos referimos a esta estructura de árbol, mediante la cuál podemos acceder a ella y modificar los elementos del HTML desde Javascript, añadiendo nuevas etiquetas, modificando o eliminando otras, cambiando sus atributos HTML, añadiendo clases, cambiando el contenido de texto, etc...

Al estar controlado por un lenguaje de programación, todas estas tareas se pueden automatizar, incluso indicando que se realicen cuando el usuario haga acciones determinadas, como por ejemplo: pulsar un botón, mover el ratón, hacer click en una parte del documento, escribir un texto, etc...

El objeto document

En Javascript, la forma de acceder al DOM es a través de un objeto llamado document, que representa el árbol DOM de la página o, más concretamente, la página de la pestaña del navegador donde nos encontramos. En su interior pueden existir varios tipos de elementos, pero principalmente serán o :

  • no es más que la representación genérica de una etiqueta: HTMLElement.
  • es una unidad más básica, la cuál puede ser o un nodo de texto.

Todos los elementos HTML, dependiendo del elemento que sean, tendrán un tipo de dato específico. Algunos ejemplos:

Tipo de dato genérico Tipo específico Etiqueta Descripción + info
HTMLElement HTMLDivElement <div> Etiqueta divisoria (en bloque). Elemento <div>
HTMLElement HTMLSpanElement <span> Etiqueta divisoria (en línea). Elemento <span>
HTMLElement HTMLImageElement <img> Imagen. Elemento <img>
HTMLElement HTMLAudioElement <audio> Contenedor de audio. Elemento <audio>

Obviamente, existen muchos tipos de datos específicos, uno por cada etiqueta HTML.

API nativa de Javascript

En los siguientes capítulos veremos que Javascript nos proporciona un conjunto de herramientas para trabajar de forma nativa con el DOM de la página, entre las que se encuentran:

Capítulo del DOM Descripción
🔍 Buscar etiquetas Métodos para buscar elementos en el DOM como .querySelector().
🔮 Crear etiquetas Métodos y consejos para crear elementos en el DOM y trabajar con ellos.
📩 Gestionar atributos Formas de gestionar y modificar atributos HTML de elementos del DOM.
🎭 Gestión de CSS Uso de la API .classList para manipular clases CSS desde Javascript.
🧾 Contenido etiquetas Acceder y modificar el contenido de una etiqueta HTML del DOM.
🔌 Insertar etiquetas Formas de añadir elementos en el DOM, como .appendChild() u otros.
🚢 Navegar por etiquetas Métodos para «navegar» a través de la jerarquía del DOM.
🧙‍♂️ Animar elementos del DOM Aplicar animaciones CSS a elementos del DOM desde Javascript con animate().

Librerías de terceros

En muchos casos, el rendimiento no es lo suficientemente importante como para justificar trabajar a bajo nivel, por lo que se prefiere utilizar algunas librerías de terceros que nos facilitan el trabajo a costa de reducir minimamente el rendimiento, pero permitiéndonos programar más rápidamente.

Si es tu caso, puedes utilizar alguna de las siguientes librerías para abstraerte del DOM:

Librería Descripción GitHub
RE:DOM Librería para crear interfaces de usuario, basada en DOM. @redom/redom
D3js Librería para creación de gráficas, datos y grafos que puede manipular el DOM. @d3/d3
UmbrellaJS Librería para manipular el DOM y eventos @franciscop/umbrella

Sin embargo, si lo que deseas es no trabajar con el DOM, lo normal suele ser elegir un framework Javascript. La mayoría de los frameworks de JS utilizan un Virtual DOM, es decir, una abstracción para automatizarlo sin que el programador tenga que manipularlo a bajo nivel, sino mediante otras estrategias. Librerías o frameworks como React, Vue o Angular, son bastante populares por esto.

Aunque los frameworks Javascript no trabajen directamente con el DOM, esto no significa que sea una mala práctica acceder al DOM. Cada framework tiene sus propias normas, consejos y formas de hacer las cosas. Se aconseja que el programador sepa trabajar con el DOM porque muchas veces tener esa visión hace que sea mucho más fácil a la hora de pensar para resolver problemas.

¿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