El DOM (Document Object Model) es el árbol de objetos que representa una página HTML dentro del navegador.
Es decir, es la representación en memoria que hace el navegador despues de leer e interpretar tu html.
Este modelo permite que lenguajes como JavaScript puedan leer, modificar, añadir o eliminar elementos de la página web en tiempo real, interactuando con la estructura visual.
Cómo el navegador lee tu código
Cuando escribís vuestro <header>, vuestros <h1> y vuestros párrafos en el editor, al final no son más que un montón de texto plano. Sin embargo, el navegador no entiende de texto crudo, entiende de objetos informáticos.
Al cargar la página, el motor del navegador analiza cada línea de vuestro código HTML. Por cada etiqueta que encuentra, crea un objeto equivalente en su memoria (un componente) y establece relaciones de parentesco entre ellos.
El Árbol de nodos
El resultado de este proceso de lectura exhaustiva es una inmensa estructura de datos en forma de árbol invertido,
En la raíz absoluta, está el objeto global document (que representa la página entera).
De él cuelga la etiqueta fundamental, el <html>.
Este a su vez tiene el <head> y el <body>.
Y del <body> cuelgan todos vuestros párrafos <p>, botones <button>, imágenes <img>, etc.
A cada una de estas piezas individuales en el árbol se las conoce técnicamente como “nodos”. Existen nodos de elemento (las propias etiquetas HTML), nodos de texto (las palabras que hay dentro de las etiquetas) e incluso nodos de atributo (las clases o IDs que les asignáis).
HTML original vs DOM actual
El HTML que escribís en el archivo y el DOM que ve el navegador pueden no ser exactamente iguales.
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
Ese archivo es el punto de partida. Pero después JavaScript (y CSS) pueden añadir elementos, borrar nodos o cambiar clases.
document.querySelector('ul').innerHTML += '<li>JavaScript</li>';
El Inspector de elementos
Seguramente alguna vez habéis pulsado F12 en vuestro teclado por error y se os ha abierto un panel lateral lleno de código.
Esa herramienta de desarrollo es el Inspector de Elementos. Y un detalle fundamental es que la pestaña “Elements” que muestra no es exactamente vuestro código HTML estático original, sino la representación visual, en directo y actual del árbol del DOM.
Los cambios son locales
Cuando manipulamos el DOM desde JavaScript, normalmente estamos cambiando solo la página cargada en el navegador del usuario.
El archivo .html del disco no cambia. Lo que cambia es la representación que el navegador tiene en memoria.
Si refrescáis la página, el navegador volverá a pedir el HTML original al servidor y reconstruirá el DOM desde cero.
