Entorno del Navegador en JavaScript, Especificaciones
Comprende el entorno del navegador en JavaScript: el objeto global window, el DOM (document), el BOM (navigator, location, history, screen) y sus especificaciones, con ejemplos ejecutables.
JavaScript es una herramienta muy importante para hacer que los sitios web sean interactivos. Esta guía te ayudará a entender cómo funciona JavaScript en un navegador web, abarcando temas importantes como el Document Object Model (DOM), el Browser Object Model (BOM) y cómo podemos manipularlos mediante JavaScript. También te mostraremos algunos ejemplos de código sencillos para ayudarte a comenzar.
El núcleo de JavaScript frente al entorno host
El propio lenguaje JavaScript — la parte definida por la especificación ECMAScript — solo conoce cosas como números, cadenas, objetos, arrays, funciones, Math, JSON, etcétera. No tiene ningún concepto de página web, botón o URL.
Esas capacidades provienen del entorno host: el programa que ejecuta tu código. En un navegador web, ese entorno le entrega a JavaScript un amplio conjunto de objetos adicionales (el DOM y el BOM) para que tus scripts puedan leer y modificar la página y comunicarse con el navegador. Un host diferente, como Node.js, proporciona un conjunto completamente distinto (sistema de archivos, servidores de red) y no tiene ningún document ni window.
Por lo tanto, un script de navegador son realmente dos capas que trabajan juntas:
- Núcleo ECMAScript — las características del lenguaje que existen en todas partes.
- Objetos del host (navegador) —
window,document,navigator,locationy el resto, proporcionados por el navegador, no por el lenguaje.
window: el objeto global
En el navegador, el objeto superior de todo es window. Desempeña dos roles a la vez:
- Representa la ventana del navegador (su tamaño, las pestañas que abre, alertas, temporizadores).
- Es el objeto global — cada variable global y función global se convierte en una propiedad de
window.
Por eso todos estos hacen referencia a lo mismo:
Las dos grandes familias de objetos colgadas de window son el DOM (la página) y el BOM (el navegador). El resto de esta guía recorre ambos.
¿Qué es el Document Object Model (DOM)?
El Document Object Model (DOM) es como un mapa del contenido de un sitio web. El navegador analiza el HTML y lo convierte en un árbol de objetos, y la raíz de ese árbol es el objeto document. Cada etiqueta se convierte en un nodo que puedes leer, modificar, añadir o eliminar desde JavaScript — lo que significa que puedes cambiar el contenido, la estructura y el diseño del sitio web en tiempo de ejecución.
Para un recorrido más profundo y práctico sobre la selección y modificación de nodos, consulta manipulación del DOM.
Ejemplo: Añadir y cambiar elementos
Así se añade una nueva parte a una página web y se cambia su contenido. Como puedes ver en el ejemplo a continuación, no hay ningún párrafo de texto en el cuerpo. Sin embargo, el código JavaScript añade una nueva etiqueta p al objeto document.
<!-- snippet: html-result -->
<!DOCTYPE html>
<html>
<head>
<title>Simple DOM Example</title>
</head>
<body>
<script>
// Make a new part of the page
const paragraph = document.createElement("p");
paragraph.textContent = "Hello, JavaScript!";
// Add the new part to the page
document.body.appendChild(paragraph);
</script>
</body>
</html>¿Qué es el Browser Object Model (BOM)?
El Browser Object Model (BOM) proporciona a JavaScript la capacidad de interactuar con el navegador. Incluye varios objetos que permiten a los scripts realizar funciones relacionadas con el propio navegador, no solo con el contenido de la página web. El BOM también incluye objetos estándar como history para gestionar la navegación del navegador y screen para acceder a las dimensiones de la pantalla. Para aclarar el límite desde el principio: el DOM se centra en la estructura y el contenido de la página web, mientras que el BOM se centra en la propia ventana del navegador.
Componentes del BOM
window
El objeto window representa la ventana del navegador. Contiene funciones para controlar el navegador, incluyendo la lectura de su tamaño y posición, el desplazamiento, la configuración de temporizadores (setTimeout, setInterval) y la muestra de diálogos (alert, confirm, prompt). Para medir y desplazar el viewport específicamente, consulta tamaños de ventana y desplazamiento.
Así puedes abrir una nueva ventana del navegador usando el objeto window:
<!-- snippet: html-result -->
<!DOCTYPE html>
<html>
<head>
<title>Open New Window Example</title>
</head>
<body>
<button onclick="openNewWindow()">Click to Open a New Window</button>
<script>
function openNewWindow() {
// Open a new window and specify its properties
var myWindow = window.open("", "MsgWindow", "width=400,height=200");
myWindow.document.body.innerHTML = "<p>Welcome to a new pop-up window! This is created using JavaScript.</p>";
}
</script>
</body>
</html>Nota: Los navegadores modernos suelen bloquear
window.open()si no es activado directamente por un gesto del usuario, como un clic.
navigator
El objeto navigator contiene información sobre el navegador, como el nombre, la versión y las capacidades del navegador, como la compatibilidad con cookies. Así se usa el objeto navigator para comprobar si las cookies están habilitadas:
Location
El objeto location proporciona información sobre la URL actual y se puede usar para redirigir el navegador a una dirección diferente. Este ejemplo mostrará varios componentes de la URL (como el protocolo, el nombre de host y la ruta) en la página web.
history
El objeto history te permite moverte por el historial de sesión del usuario — las páginas visitadas en la pestaña actual — sin exponer las URL reales. Es lo que impulsa los botones Atrás y Adelante del navegador, y es la base del enrutamiento en el lado del cliente en aplicaciones de página única.
screen
El objeto screen describe toda la pantalla del usuario (monitor), no la ventana del navegador. Es útil para decidir cuánto espacio está disponible antes de abrir o posicionar una ventana.
Consejo:
screeninforma sobre la pantalla física. Para medir el área que tu página puede usar realmente, lee el viewport dewindowen su lugar.
Las especificaciones detrás del entorno del navegador
Estos objetos no son inventados por cada navegador — están definidos por estándares públicos para que el código se comporte igual en todas partes:
- ECMAScript (mantenido por TC39) — el núcleo del lenguaje JavaScript: sintaxis, tipos y objetos integrados como
Array,Object,Math,JSON. - DOM Living Standard (WHATWG) —
documenty el árbol de nodos de elementos. - HTML Living Standard (WHATWG) — define
window,navigator,location,historyy cómo las páginas HTML ejecutan scripts. - CSSOM (W3C) — el modelo de objetos para leer y cambiar estilos desde JavaScript.
Cuando las personas dicen que una característica es "estándar", quieren decir que aparece en una de estas especificaciones y que los navegadores la han implementado en consecuencia.
Más formas de usar el DOM
JavaScript también te permite gestionar el contenido del sitio web dinámicamente con eventos y atributos de datos.
Ejemplo: Gestión de clics y uso de datos
Así se configuran eventos de clic y se usan atributos de datos:
<!-- snippet: html-result -->
<!DOCTYPE html>
<html>
<head>
<title>Click Event Example</title>
<style>
#first {
background-color: red;
max-width: 100px;
}
</style>
</head>
<body>
<div id="first">Click me!</div>
<script>
document.getElementById('first').addEventListener('click', function () {
alert(`Item clicked.`);
});
</script>
</body>
</html>Este código configura un evento de clic para el elemento div y muestra un mensaje cuando se hace clic en él. Algunos eventos también desencadenan el comportamiento predeterminado del navegador (un enlace navega, un formulario se envía) — para aprender a controlar o cancelar eso, consulta acciones predeterminadas del navegador.
Conclusión
Entender cómo interactúa JavaScript con el navegador te permite construir sitios web receptivos e impulsados por el usuario. Al dominar el DOM y el BOM junto con las mejores prácticas modernas, puedes crear aplicaciones web fiables y atractivas.