DOM

Al cargar el HTML, el navegador construye el DOM: un árbol de objetos en el que cada etiqueta, atributo y texto es un nodo. Lo que ves en pantalla es el reflejo de ese árbol.

JavaScript usa el DOM para buscar elementos (document.querySelector), cambiar su texto o sus estilos, crear otros nuevos y reaccionar a eventos como los clics.

Un ejemplo

document.querySelector("#total").textContent = "25 €" cambia en directo el total que aparece en la página.

Por qué importa

El DOM es el puente entre JavaScript y lo que ves en la página: gracias a él puedes cambiar un texto, ocultar un menú, añadir elementos a una lista o leer lo que el usuario escribe en un formulario. Sin el DOM, JavaScript no tendría forma de interactuar con la página.

Entenderlo también ayuda con el rendimiento y la depuración. Las herramientas de desarrollo del navegador, en la pestaña Elementos, muestran el DOM actual, que puede ser distinto del HTML original si algún script lo ha modificado. Los frameworks como React o Vue existen en buena parte para gestionar el DOM de forma eficiente.

Confusiones frecuentes

El DOM no es el código HTML: el HTML es el texto que el navegador recibe, y el DOM es la estructura en memoria que construye a partir de él y que JavaScript puede modificar. Por eso «ver código fuente» y la pestaña Elementos pueden mostrar cosas distintas. Tampoco forma parte del lenguaje JavaScript en sí: es una API que ofrece el navegador, y por eso document no existe en Node.js. Un fallo típico es intentar acceder a un elemento antes de que la página lo haya cargado.

Preguntas frecuentes

¿Cómo selecciono un elemento?

Con document.querySelector(".clase") para el primero que coincida con un selector CSS, o querySelectorAll para todos.

¿Por qué me devuelve `null` el elemento?

Porque no existe aún en el DOM cuando se ejecuta el script, o el selector es incorrecto. Coloca el script al final del body o usa el atributo defer.