Cuando abres una página en tu navegador, hay un proceso silencioso que decide cómo vas a interactuar con ella. Ese proceso se llama DOM (Document Object Model) y entenderlo es la base para manipular cualquier sitio web con JavaScript, sobre todo si estás dando tus primeros pasos en desarrollo frontend.

¿Qué es el DOM y cómo lo genera el navegador?

El DOM es la representación en forma de árbol que el navegador construye después de interpretar el HTML que recibe del servidor. Cuando escribes platzi.com, tu navegador pide archivos a un servidor, los traduce y arma una jerarquía que va de padres a hijos, donde cada etiqueta HTML se convierte en un nodo.

Esos nodos no son solo elementos visuales. Cada uno se transforma en un pequeño objeto de JavaScript al que puedes acceder directamente desde tu código. Y ahí está la magia: una vez que tienes acceso a esos nodos, puedes seleccionarlos y manipularlos para cambiar lo que el usuario ve y cómo interactúa con la página [0:30].

¿Qué es el DOM en JavaScript? Es un árbol jerárquico de nodos que el navegador genera al interpretar el HTML. Cada etiqueta se convierte en un objeto manipulable desde JavaScript.

¿Por qué se le llama una web API?

Porque el navegador te entrega el DOM como una interfaz lista para usar. No tienes que construirla, solo aprovecharla. Esa es la razón por la que puedes escribir una línea de JavaScript y, de pronto, cambiar el color de un botón o esconder un menú.

¿Cuál es la diferencia entre el DOM y el Window Object?

Aquí viene una distinción clave que confunde a mucha gente al inicio. Existen dos tipos de objetos con los que vas a trabajar en el navegador, y aunque se relacionan, no son lo mismo.

El primero es el DOM, que ya conoces. El segundo es el Window Object, que es la pantalla completa del navegador. Imagina que estás viendo platzi.com: ese rectángulo que enmarca toda la página es el window, y dentro de él vive el DOM [1:30].

Dicho de otra forma, tienes acceso al DOM porque primero existe una ventana de navegador abierta. El window es el contenedor; el DOM es el contenido manipulable.

¿Qué puedes hacer con el Window Object?

El window te da acceso a otras web APIs que no tienen que ver con el contenido HTML. Algunas de las más comunes son:

• Lanzar un alert, ese recuadro emergente que aparece en el navegador.
• Pedir acceso al micrófono del usuario.
• Pedir acceso a la cámara de la computadora.

Nada de eso pasa por el DOM. Son funciones que el navegador expone a través del window, y las usas cuando necesitas interactuar con el dispositivo o mostrar mensajes globales [2:00].

¿Y qué haces específicamente con el DOM?

El DOM es tu herramienta cuando quieres que la página sea dinámica. Selecciona un elemento, modifícalo y verás el cambio reflejado al instante. Aquí entran acciones como:

• Seleccionar etiquetas HTML específicas.
• Cambiar texto, estilos o atributos.
• Agregar o eliminar elementos del árbol.

¿Para qué sirve manipular el DOM? Sirve para hacer que una página web responda a las acciones del usuario sin recargarse. Es la base de cualquier interacción dinámica en frontend.

¿Por qué importa entender esta diferencia desde el inicio?

Porque cuando empieces a escribir código, vas a invocar funciones que pertenecen a uno u otro objeto, y saber dónde vive cada cosa te ahorra horas de debugging. Si quieres mostrar una alerta, hablas con el window. Si quieres cambiar un título, hablas con el DOM.

Esa claridad mental te va a servir cada vez que leas documentación o sigas un tutorial. Sabrás exactamente a qué API estás llamando y por qué.

¿Ya tienes claro cómo vas a usar el DOM en tu próximo proyecto? Cuéntame en los comentarios qué elemento te gustaría manipular primero.