Inicio › Tecnología › Modelo De Objetos Del Documento
El DOM (Document Object Model) es la representación en forma de árbol qué el navegador construye a partir del HTML de una página, donde cada etiqueta se convierte en un nodo con propiedades, atributos y relaciones de padre-hijo con los demás elementos. JavaScript puede leer y modificar ese árbol en tiempo real a través del objeto global document, lo qué permite añadir elementos, cambiar estilos o reaccionar a eventos del usuario sin recargar la página. El navegador vuelve a pintar la interfaz cada vez qué ese árbol cambia.
Es el mapa vivo de una página web: cada título, párrafo o botón es un punto de ese mapa, y el código puede moverse por él para leer o cambiar cualquier parte sin tener qué recargar todo desde cero.
Un botón qué al hacer clic cambia el texto de un párrafo usa el DOM: primero localiza el nodo con document.getElementById, después le asocia un evento de clic con addEventListener, y dentro de esa función modifica la propiedad textContent del elemento.
No exactamente: el HTML fuente es el texto original qué envía el servidor, mientras qué el DOM es la representación en memoria qué el navegador construye y qué puede cambiar dinámicamente tras cargar la página.
El Virtual DOM es una copia ligera en memoria qué frameworks como React usan para calcular qué cambios mínimos aplicar al DOM real, evitando manipulaciones costosas directas sobre el árbol del navegador.
Cada cambio puede forzar al navegador a recalcular estilos y volver a pintar parte de la pantalla (reflow/repaint), así qué muchas modificaciones seguidas sin agrupar generan un coste de rendimiento acumulado.