Comprender cómo JavaScript interactúa con el navegador es fundamental para cualquier persona que quiera manipular páginas web de forma dinámica. Dos objetos esenciales conviven en ese entorno: document y window. Aunque a primera vista pueden parecer similares, cada uno cumple un rol diferente y conocer esa distinción te permitirá escribir código más preciso y eficiente.
¿Qué es el DOM y cómo se genera?
Cuando el navegador recibe un archivo HTML, lo primero que hace es parsearlo, es decir, leer y transformar ese marcado en una estructura de objetos que JavaScript puede entender. El resultado de ese proceso es el DOM (Document Object Model) [01:12].
Al escribir document en la consola del navegador y presionar enter, se obtiene un objeto que replica la estructura del HTML: el head, el body y cada una de las etiquetas que componen la página [01:30]. En la práctica, es un clon vivo del archivo original.
Para inspeccionar el DOM con mayor detalle se puede usar console.dir(document) [02:06]. Esto despliega el objeto completo y permite ver:
- Propiedades como
innerText, que devuelve el texto contenido en un nodo.
innerHTML, que muestra la estructura HTML interna de un elemento.- Métodos para crear, eliminar o modificar nodos.
- Eventos asociados a los diferentes elementos.
Gracias a estas propiedades y métodos, el DOM se convierte en la puerta de entrada para manipular contenido, estilos y estructura directamente desde JavaScript [03:05].
¿Qué es el objeto Window y en qué se diferencia?
Si en la consola escribes window, obtienes un objeto que a primera vista luce parecido, pero que engloba mucho más que el documento [03:25]. window es el objeto padre que representa la ventana completa del navegador, y dentro de él vive document.
Algunas capacidades exclusivas de window son:
alert(): muestra una ventana emergente con un mensaje que el usuario debe cerrar. Pertenece por completo a la ventana del navegador, no al DOM [03:50].- Caché del navegador: cuando un proyecto necesita almacenar información localmente —por ejemplo mediante
localStorage o sessionStorage—, esa gestión se realiza a través de window, porque es el navegador quien guarda esos datos [04:10].
- Otros métodos y propiedades relacionados con el tamaño de la ventana, la ubicación (location), el historial de navegación y más.
¿Cómo se relacionan Window y document?
Dentro del objeto window existe la propiedad document, que es exactamente el mismo objeto DOM que se exploró antes [04:40]. Esto significa que cuando escribes document.querySelector(...), en realidad estás accediendo a window.document.querySelector(...). El navegador simplifica esa referencia, pero la jerarquía real es clara: window contiene a document.
¿Para qué sirve entender esta jerarquía?
Distinguir ambos objetos ayuda a saber dónde buscar cada funcionalidad:
- Manipulación de HTML (crear nodos, cambiar texto, modificar estilos) →
document (DOM) [05:10].
- Interacción con el navegador (alertas, almacenamiento, dimensiones de ventana) →
window.
En resumen, window es todo lo que ves en la ventana del navegador, mientras que document es la representación en objetos del HTML ya parseado, lista para ser modificada con JavaScript [05:00].
¿Qué operaciones permite el DOM sobre los nodos?
Una vez que el DOM está disponible, las posibilidades de manipulación son amplias:
- Creación de nodos: agregar nuevas etiquetas HTML al documento.
- Eliminación de nodos: remover elementos que ya no son necesarios.
- Modificación de nodos: cambiar contenido, atributos o estilos de los elementos existentes.
Estas tres operaciones son la base de cualquier interacción dinámica en una página web y se ejecutan siempre a través del objeto document, es decir, del DOM [05:20].
Si quieres profundizar, abre la consola de tu navegador y experimenta con console.dir(document) y console.dir(window) para comparar ambos objetos por ti mismo. ¿Qué propiedades te resultan más útiles? Comparte tu experiencia en los comentarios.
