Diferencias entre el DOM y el objeto Window en JavaScript

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.