Document Object Model (DOM): Definición, Tree, Manipulación
El DOM es la representación tree del navegador de un documento HTML. JavaScript lee y manipula el DOM para actualizar páginas dinámicamente.
¿Qué es el Document Object Model (DOM)?
El Document Object Model (DOM) es la representación in-memory del navegador de un documento HTML (o XML), estructurada como un tree de nodes. Cada elemento HTML, atributo y pieza texto se vuelve un node. JavaScript usa la DOM API para leer la estructura, modificarla y responder a eventos usuario — así funcionan las páginas web dinámicas.
El DOM es un estándar W3C, implementado por cada navegador.
El DOM tree
<!DOCTYPE html>
<html>
<body>
<h1 id="title">Welcome</h1>
<p class="intro">Hi there!</p>
</body>
</html>Se vuelve un tree:
document
└── html
└── body
├── h1#title → "Welcome"
└── p.intro → "Hi there!"Operaciones DOM comunes
Seleccionar elementos
document.getElementById('title');
document.querySelector('.intro');
document.querySelectorAll('p');Leer contenido
const title = document.getElementById('title');
console.log(title.textContent);
console.log(title.innerHTML);Modificar contenido
title.textContent = 'Hello, world';
title.classList.add('highlighted');
title.setAttribute('data-id', '42');Crear + insertar elementos
const newP = document.createElement('p');
newP.textContent = 'New paragraph';
document.body.appendChild(newP);Remover elementos
document.querySelector('.intro').remove();Manejo eventos
document.getElementById('btn').addEventListener('click', (event) => {
console.log('Clicked!');
});Tipos node DOM
| Tipo | Descripción |
|---|---|
| Element | Elementos HTML |
| Text | Contenido texto en elementos |
| Comment | Comentarios HTML |
| Document | El documento raíz |
| DocumentFragment | Container lightweight para building off-DOM |
| Attribute | Atributos element |
Performance: operaciones DOM son expensive
- Batchear cambios DOM.
- Usar DocumentFragment.
- Read then write.
- CSS transforms para animación.
- Virtualizar listas largas.
- Debounce/throttle event handlers.
Virtual DOM (React, Vue) vs real DOM
Frameworks como React mantienen un "virtual DOM". Cuando state cambia, computa nuevo virtual DOM, diffea contra anterior y aplica cambios mínimos al real DOM.
Eventos DOM
| Evento | Triggered por |
|---|---|
click | Click mouse |
input / change | Updates form field |
submit | Submission form |
keydown / keyup | Interacción teclado |
scroll | Scrolling |
resize | Resize ventana |
load / DOMContentLoaded | Carga página |
Mejores prácticas DOM
- Cachear lookups DOM.
- Usar event delegation.
- Preferir textContent sobre innerHTML.
- Clases, no inline styles.
- requestAnimationFrame para updates visuales.
- Disconnect observers.
- Evitar forced synchronous layout.
Pitfalls DOM comunes
- innerHTML con input usuario.
- Layout thrashing.
- Memory leaks.
- Muchos updates DOM pequeños.
- Listenear en cada child.
- document.write.
- DOM síncrono en scroll handler.
FAQ: Document Object Model
¿Es el DOM lo mismo que HTML?
No. HTML es markup source. El DOM es la representación tree in-memory.
¿Diferencia entre DOM y BOM?
DOM = tree documento. BOM = navegador mismo.
¿Por qué es lenta la manipulación DOM?
Cambios DOM trigean reflow + repaint.
¿Por qué React/Vue usan virtual DOM?
Para minimizar operaciones expensive real DOM.
¿Qué es el "Shadow DOM"?
Un tree DOM encapsulado para Web Components.
¿Cómo prevengo XSS en operaciones DOM?
Usar textContent en vez de innerHTML.
¿Qué es MutationObserver?
Una API para observar cambios DOM.
Testea performance app DOM-heavy con LoadFocus
LoadFocus corre auditorías Lighthouse desde 25+ regiones. Regístrate en loadfocus.com/signup.
Herramientas LoadFocus relacionadas
Lleva este concepto a la práctica con LoadFocus — la misma plataforma que potencia todo lo que acabas de leer.