El DOM (Document Object Model) es una interfaz de programación para documentos HTML y XML.
Cuando el navegador web procesa un HTML, internamente (en la memoria) crea un árbol de nodos que representan la estructura del documento.
Este árbol es lo que usa el navegador para procesar, trabajar, y renderizar cada parte del documento *(elementos, atributos, y texto).
El DOM es el “estándar” que sigue este árbol de nodos. Es una forma estructurada y jerárquica de acceder y manipular el contenido y la estructura de una página web.
De esta forma, actúa como el puente entre el contenido de una página web y los lenguajes de programación que la pueden manipular dinámicamente (por ejemplo, para cambiar un elemento, añadir o quitar uno, etc).
Estructura del DOM
La estructura básica del DOM puede visualizarse como un árbol con el nodo raíz (el documento) en la parte superior, y los elementos, atributos, y texto como nodos hijos y subnodos.
Por ejemplo, cuando el navegador recibe este HTML,
<!DOCTYPE html>
<html>
<head>
<title>Mi Página Web</title>
</head>
<body>
<div id="contenido">
<h1>Hola, Mundo!</h1>
<p>Este es un párrafo de texto.</p>
</div>
</body>
</html>El navegador lo lee, lo procesa, y en memoria crea un árbol DOM que podemos representar así,
🏠 Document
└── 📦 html
├── 📦 head
│ └── ✏️ title
└── 📦 body
└── 📦 div
├── 📄 id="contenido"
├── ✏️ h1
└── ✏️ pEsto es con lo que trabaja internamente el navegador
Nodos en el DOM
Como hemos dicho, todo lo que hay dentro el DOM son nodos. Pero pueden especializarse en distintos tipos.
Los principales tipos de nodos en el DOM incluyen:
| Tipo de nodo | Clase nodo | Ejemplos HTML | Descripción |
|---|---|---|---|
| 🏠 Documento | HTMLDocument | (todo el documento) | El documento entero. |
| 📦 Elemento | HTMLElement | <div>, <p>, <h1> | Cada etiqueta HTML. |
| 📄 Atributo | Attr | id="miDiv" | Los atributos de los elementos. |
| ✏️ Texto | Text | "Hola, Mundo!" | El contenido textual del elemento. |
| 💬 Comentario | Comment | <!-- Comentario --> | Los comentarios en el HTML. |
A su vez, el tipo HTMLElement, puede especializarse en un subtipo diferente. Existe uno por cada etiqueta de HTML. Os dejo un listado con los principales aquí 👇
Subtipos de HTMLElement
| Subtipo | Descripción |
|---|---|
HTMLAnchorElement | Un enlace <a>, utilizado para crear hipervínculos. |
HTMLDivElement | Un contenedor <div>, utilizado para agrupar otros elementos. |
HTMLImageElement | Una imagen <img>, que se utiliza para insertar imágenes en el documento. |
HTMLInputElement | Un campo de entrada <input>, como campos de texto, etc. |
HTMLButtonElement | Un botón <button>, que se puede utilizar para enviar formularios o ejecutar scripts. |
HTMLParagraphElement | Un párrafo <p>, que contiene texto o elementos dentro de un bloque de párrafo. |
HTMLHeadingElement | Un encabezado (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>). |
HTMLSpanElement | Un contenedor en línea <span> |
HTMLTableElement | Una tabla <table>. |
HTMLTableRowElement | Una fila de una tabla <tr>. |
HTMLTableCellElement | Una celda dentro de una tabla, ya sea <td> o <th>. |
HTMLFormElement | Un formulario <form>, utilizado para recolectar datos del usuario. |
HTMLSelectElement | Un campo de selección <select>, que permite al usuario elegir entre opciones. |
HTMLOptionElement | Una opción dentro de un campo <select>, que corresponde a la etiqueta <option>. |
HTMLTextAreaElement | Un área de texto <textarea>, que permite introducir texto multilinea. |
HTMLLinkElement | Un enlace <link>, utilizado para enlazar a recursos externos, como hojas de estilo. |
HTMLScriptElement | Una etiqueta <script>, que se usa para insertar o referenciar código JavaScript. |
HTMLAudioElement | Un elemento de audio <audio>, usado para incrustar sonido o música en la página. |
HTMLVideoElement | Un elemento de video <video>, utilizado para incrustar videos en la página. |
HTMLCanvasElement | Un lienzo <canvas>, usado para dibujar gráficos mediante JavaScript. |
HTMLDetailsElement | El elemento <details>, que permite crear un cuadro desplegable interactivo. |
HTMLSummaryElement | El encabezado del elemento <details>, que se utiliza para mostrar u ocultar el contenido. |
Para que nos sirve el DOM
El DOM proporciona una manera de interactuar con los documentos web desde un lenguaje de programación como JavaScript.
Por ejemplo, con el DOM podemos
- Seleccionar elementos leer más
- Navegar entre elementos leer más
- Modificar el contenido de los elementos leer más
- Añadir o quitar elementos leer más
- Modificar los estilos de los elementos leer más
Cómo se actualiza el DOM
Cada vez que hacemos una acción sobre el DOM, el navegador actualiza automáticamente cada uno de los cambios realizados por JavaScript.
Por ejemplo, cuando manipulamos el DOM mediante métodos como appendChild, removeChild, o innerHTML, el navegador actualiza la representación visual del documento en consecuencia.
Esto está muy bien, pero en proyectos y aplicaciones grandes y complejas, si actualizamos muchos elementos constantemente, puede suponer un problema de rendimiento.
Para mejorarlo hay varios “trucos” que podemos hacer, como
- Evitar manipulaciones directas frecuentes: Reduce la cantidad de acceso y modificación directa al DOM para mejorar el rendimiento.
- Utilizar fragmentos del DOM: Usa
DocumentFragmentpara hacer cambios en un fragmento del DOM antes de agregarlo al DOM principal. - DOM alternativos: Algunos frameworks usan su propio DOM interno, donde recolectan los cambios antes de mandarlos al DOM del navegador.