ManzDev
Perfil de Manz Dashboard de actividad
HTML5 Etiquetas HTML
CSS CSS vanilla
PostCSS Transformador CSS
Javascript Javascript ES2020+
NPM Node Package Manager
WebComponents Componentes web
Terminal Terminal de GNU/Linux
VueJS Framework VueJS 3
Automatizadores Empaquetadores Javascript
Youtube Canal de Youtube
Twitch Canal de Twitch
Telegram Canal de Telegram
Discord Servidor de Discord

¿Qué es el DOM?

Video de Youtube: El DOM (Document Object Model) es como se conoce a la estructura de un documento HTML, formado por etiquetas HTML y sus características.

Si lo prefieres, este tema lo tienes disponible en formato de video en ManzDev, mi canal de Youtube. Son sesiones en vivo donde hago streaming explicando temas tecnológicos u otras cosas relacionadas. ¡Si te interesa, sígueme en Twitch! Video: Youtube: ¿Qué es el DOM?.

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» (sin demasiada personalización por parte del usuario), pero si añadimos Javascript, podremos crear páginas «dinámicas». Cuando hablamos de páginas dinámicas, nos referimos a que podemos dotar de la potencia y flexibilidad que nos da un lenguaje de programación para crear documentos y páginas mucho más ricas, que brinden una experiencia más completa y con el que se puedan 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).

DOM: Document Object Model

En Javascript, cuando nos referimos al DOM nos referimos a esta estructura, que podemos modificar de forma dinámica 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 "amparado" 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 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 Tipo específico Etiqueta Descripción
HTMLElement HTMLDivElement <div> Capa divisoria invisible (en bloque).
HTMLElement HTMLSpanElement <span> Capa divisoria invisible (en línea).
HTMLElement HTMLImageElement <img> Imagen.
HTMLElement HTMLAudioElement <audio> Contenedor de 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 Familia de métodos entre los que se encuentran funciones como .getElementById(), .querySelector() o .querySelectorAll(), entre otras.
🔮 Crear etiquetas Una serie de métodos y consejos para crear elementos en la página y trabajar con ellos de forma dinámica.
🔌 Insertar etiquetas Las mejores formas de añadir elementos al DOM, ya sea utilizando propiedades como .innerHTML o método como .appendChild(), .insertAdjacentHTML(), entre otros.
🎭 Gestión de CSS Consejos para la utilización de la API .classList de Javascript que nos permite manipular clases CSS desde JS, de modo que podamos añadir, modificar, eliminar clases de CSS de un elemento de una forma práctica y cómoda.
🚢 Navegar por tags Utilización de una serie de métodos y propiedades que nos permiten «navegar» a través de la jerarquía del DOM, ciñéndonos a la estructura del documento y la posición de los elementos en la misma.

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
Voyeur.js Pequeña librería para manipular el DOM @adriancooney/voyeur.js
HtmlJs Motor de renderización de HTML y data binding (MVVM) @nhanfu/htmljs
DOMtastic Libraría moderna y modular para DOM/Events @webpro/DOMtastic
UmbrellaJS Librería para manipular el DOM y eventos @franciscop/umbrella
SuperDOM Manipulando DOM como si estuvieras en 2018 @szaranger/superdom

Muchas veces, también se eligen frameworks de Javascript para trabajar, que en cierta forma también te abstraen de tener que gestionar el DOM a bajo nivel, y lo cambian por realizar otras tareas o estrategias relacionadas con el framework escogido.



Manz
Publicado por Manz

Docente, divulgador informático y Streamer de código. Amante del CSS y de la plataforma web en general. Autor de Emezeta.com tiempo atrás. Ha trabajado como profesor en la Universidad de La Laguna y es director del curso de Programación web FullStack y FrontEnd de EOI en Tenerife. En sus ratos libres, busca GIF de gatos en Internet.