El Modelo de Objetos del Navegador, conocido como BOM por sus siglas en inglés (Browser Object Model), es una de las piezas fundamentales de JavaScript cuando trabajamos con páginas web.

Gracias al BOM, un programa JavaScript puede interactuar con diferentes elementos relacionados con el navegador, como la ventana, la dirección de la página, el historial de navegación o el tamaño disponible de la pantalla.

Aunque suele aparecer junto al DOM, ambos conceptos no son exactamente lo mismo. Mientras que el DOM permite trabajar con la estructura y el contenido de una página HTML, el BOM proporciona herramientas para comunicarse con el entorno del navegador.

¿Qué es el BOM?

El BOM (Browser Object Model) es un conjunto de objetos que proporciona el navegador para que JavaScript pueda interactuar con aspectos que rodean al documento web.

El objeto principal del BOM es window, que representa la ventana o contexto en el que se está ejecutando la página.

Por ejemplo:

window.alert("Hola");

También podemos escribirlo de una forma más sencilla:

alert("Hola");

En este caso, alert() pertenece al objeto window, por lo que no es necesario escribir window. delante.

El BOM no está definido como un estándar único de la misma manera que el DOM, sino que se refiere al conjunto de funcionalidades que los navegadores ofrecen para controlar e interactuar con su entorno.

BOM y DOM: ¿cuál es la diferencia?

Una de las dudas más habituales al estudiar JavaScript es diferenciar entre BOM y DOM.

El DOM (Document Object Model) representa el documento HTML y permite modificar elementos de la página.

Por ejemplo:

document.getElementById("titulo");

Con esta instrucción podemos acceder a un elemento concreto del documento.

El BOM, en cambio, está relacionado con el navegador y su entorno.

Una forma sencilla de entenderlo sería:

window
│
├── document
├── location
├── history
├── navigator
└── screen

El objeto document pertenece al entorno de window y está relacionado con el DOM, mientras que otros objetos permiten trabajar con diferentes características del navegador.

Para profundizar en el funcionamiento de document, resulta especialmente útil consultar la documentación de MDN sobre el DOM.

El objeto window

window es el objeto principal del BOM y representa la ventana del navegador.

A través de él podemos acceder a numerosas propiedades y métodos.

Por ejemplo:

console.log(window.innerWidth);
console.log(window.innerHeight);

Estos valores permiten conocer el ancho y la altura del área visible de la ventana.

También podemos utilizar métodos como:

window.alert("Mensaje");

o:

window.open("https://www.example.com");

El comportamiento de determinadas funciones puede estar limitado por las políticas de seguridad y permisos del navegador.

El objeto location

Otro objeto importante del BOM es location.

Este objeto contiene información sobre la dirección URL actual y permite realizar determinadas operaciones relacionadas con la navegación.

Por ejemplo:

console.log(location.href);

Podemos obtener la dirección completa de la página que está abierta.

También es posible cambiar la URL:

location.href = "https://www.example.com";

Otra posibilidad es utilizar:

location.reload();

para solicitar que se vuelva a cargar la página actual.

El objeto location resulta especialmente útil cuando necesitamos consultar o modificar la dirección desde JavaScript.

El objeto history

El objeto history permite interactuar con el historial de navegación asociado al contexto actual.

Por ejemplo:

history.back();

permite volver a la página anterior.

También podemos avanzar:

history.forward();

Y existe:

history.go(-1);

que permite desplazarse por el historial utilizando un número.

Este objeto es especialmente relevante en aplicaciones web que gestionan la navegación mediante JavaScript.

La API History de MDN explica con más detalle sus métodos y propiedades.

El objeto navigator

El objeto navigator proporciona información sobre el navegador y determinadas capacidades disponibles en el entorno.

Por ejemplo:

console.log(navigator.userAgent);

permite consultar la cadena de identificación del navegador.

También podemos encontrar propiedades relacionadas con diferentes capacidades del entorno.

Por ejemplo:

console.log(navigator.language);

puede proporcionar información sobre el idioma preferido del navegador.

Es importante tener en cuenta que la información proporcionada por navigator no debe interpretarse siempre como una identificación completamente fiable del dispositivo o del usuario.

El objeto screen

El objeto screen proporciona información relacionada con la pantalla del dispositivo.

Por ejemplo:

console.log(screen.width);
console.log(screen.height);

permite consultar las dimensiones de la pantalla.

También existen propiedades relacionadas con el espacio disponible y otros aspectos de la pantalla.

No debemos confundir screen con window: screen está relacionado con la pantalla del dispositivo, mientras que window representa el contexto de la ventana del navegador.

Temporizadores y BOM

Dentro de las funcionalidades asociadas al entorno de window también encontramos los conocidos temporizadores de JavaScript.

Por ejemplo:

setTimeout(() => {
    console.log("Han pasado unos segundos");
}, 2000);

En este caso, la función se ejecutará después del intervalo indicado.

También podemos utilizar:

setInterval(() => {
    console.log("Mensaje");
}, 1000);

para ejecutar una función periódicamente.

Estas herramientas son habituales en páginas web y aplicaciones que necesitan realizar determinadas acciones después de un tiempo o de forma repetida.

¿Para qué sirve el BOM?

El Modelo de Objetos del Navegador permite desarrollar funcionalidades que necesitan conocer o interactuar con el entorno del navegador.

Algunos ejemplos son:

• Consultar la URL actual.
• Cambiar de página.
• Recargar una página.
• Consultar información del navegador.
• Conocer determinadas dimensiones de la ventana.
• Consultar información de la pantalla.
• Trabajar con el historial de navegación.
• Mostrar determinados cuadros de diálogo.
• Utilizar temporizadores.
• Gestionar determinadas características del entorno del navegador.

Esto amplía considerablemente las posibilidades de JavaScript más allá de la simple modificación del contenido HTML.

Un ejemplo sencillo utilizando el BOM

Podemos combinar varias funcionalidades del BOM en un pequeño ejemplo:

console.log("URL:", location.href);
console.log("Ancho de la ventana:", window.innerWidth);
console.log("Altura de la ventana:", window.innerHeight);
console.log("Idioma:", navigator.language);
console.log("Ancho de pantalla:", screen.width);

Al ejecutar este código, el navegador mostrará en la consola diferentes datos relacionados con el entorno en el que se está ejecutando la página.

Este tipo de ejemplos resulta útil para empezar a familiarizarse con los diferentes objetos que forman parte del BOM.

¿Es importante aprender el BOM para programar con JavaScript?

Sí, especialmente si quieres desarrollar aplicaciones web que interactúen con el navegador.

El DOM permite manipular el contenido de una página, pero muchas funcionalidades requieren además acceder al entorno en el que esa página se está ejecutando.

Por ejemplo, una aplicación puede necesitar conocer la URL actual, utilizar el historial, consultar el tamaño de la ventana o reaccionar ante determinados cambios del navegador.

Por eso, comprender conceptos como window, location, history, navigator y screen proporciona una base importante para trabajar con JavaScript en el navegador.

La documentación de JavaScript para desarrolladores web de MDN también ofrece numerosos ejemplos y explicaciones sobre estas APIs.

En resumen

El BOM o Modelo de Objetos del Navegador es el conjunto de objetos y funcionalidades que permiten a JavaScript interactuar con el entorno del navegador.

Su objeto principal es window, del que encontramos diferentes objetos y APIs relacionados con aspectos como la dirección web, el historial, el navegador o la pantalla.

Entre los elementos más importantes se encuentran:

• window: representa la ventana o contexto del navegador.
• location: permite trabajar con la URL y la navegación.
• history: permite interactuar con el historial.
• navigator: proporciona información sobre el navegador y su entorno.
• screen: proporciona información relacionada con la pantalla.
• document: representa el documento HTML y está relacionado con el DOM.

La principal diferencia que conviene recordar es sencilla: el DOM se centra en el documento y el BOM en el navegador y su entorno. Ambos conceptos trabajan juntos y forman parte de los conocimientos fundamentales para desarrollar aplicaciones web con JavaScript.