BOM (Browser Object Model)

El BOM (Browser Object Model) es un conjunto de objetos proporcionados por el navegador que permite a los desarrolladores interactuar con el entorno del navegador web fuera del contenido del documento (HTML). A diferencia del DOM (Document Object Model), que se centra en la manipulación del contenido y la estructura del documento, el BOM permite controlar aspectos relacionados con la ventana del navegador y otras funcionalidades.

El BOM no está estandarizado formalmente, a diferencia del DOM, pero los navegadores modernos han adoptado un comportamiento bastante consistente.

Características principales

• Manipulación de la ventana del navegador: Permite abrir, cerrar, redimensionar y mover ventanas del navegador mediante objetos como window.
• Acceso a información del navegador: Se puede obtener información sobre el navegador del usuario, como el historial, la ubicación actual (URL) y las cookies.
• Navegación y redirección: Proporciona métodos para redirigir a diferentes páginas, recargar el sitio y gestionar el historial de navegación.
• Timers y asíncronía: El BOM ofrece funciones como setTimeout() y setInterval() para ejecutar código de forma asíncrona.
• No depende del DOM: Aunque suelen usarse juntos, el BOM puede funcionar sin necesidad de manipular el contenido HTML directamente.

Objetos principales del BOM

1. Objeto window

El objeto global que representa la ventana del navegador. Todos los demás objetos del BOM son propiedades de window.

Ejemplo:

 

// Muestra un cuadro de diálogo de alerta
window.alert("Hola, mundo!");

// Abre una nueva ventana o pestaña
window.open("https://www.google.com");

// Tamaño actual de la ventana
console.log("Ancho: " + window.innerWidth);
console.log("Alto: " + window.innerHeight);

2. Objeto navigator

Proporciona información sobre el navegador y el dispositivo del usuario.

Ejemplo:

 

console.log("Navegador: " + navigator.userAgent);
console.log("Idioma: " + navigator.language);
console.log("Online: " + navigator.onLine);

3. Objeto location

Permite obtener o modificar la URL actual.

Ejemplo:

 

console.log("URL actual: " + location.href);

// Redirige a otra página
// location.href = "https://www.example.com";

// Recarga la página
// location.reload();

4. Objeto history

Permite interactuar con el historial de navegación del usuario.

Ejemplo:

 

// Retrocede una página
// history.back();

// Avanza una página
// history.forward();

// Longitud del historial
console.log("Historial: " + history.length);

5. Objeto screen

Proporciona información sobre la resolución de la pantalla del usuario.

Ejemplo:

 

console.log("Ancho de pantalla: " + screen.width);
console.log("Alto de pantalla: " + screen.height);

Timers en el BOM

El BOM permite ejecutar código de forma asíncrona usando temporizadores:

• setTimeout(función, tiempo): Ejecuta una función después de un tiempo específico (en milisegundos).
• setInterval(función, tiempo): Ejecuta una función repetidamente cada cierto intervalo de tiempo.

Ejemplo:

 

// Mensaje después de 3 segundos
setTimeout(() => {
    console.log("Han pasado 3 segundos");
}, 3000);

// Contador que se actualiza cada segundo
let contador = 0;
setInterval(() => {
    contador++;
    console.log("Contador: " + contador);
}, 1000);

Relación entre el BOM y el DOM

Aunque el BOM y el DOM son diferentes, están estrechamente relacionados porque ambos forman parte del entorno del navegador:

• El BOM gestiona la ventana del navegador y las funciones fuera del contenido HTML.
• El DOM manipula la estructura y contenido del documento.

El objeto window contiene tanto las propiedades del BOM (como navigator, location, etc.) como el propio objeto document del DOM.

Ejemplo:

 

// Acceder al título del documento (DOM) desde el BOM
console.log(window.document.title);

 

 

 

Conclusión

El BOM es crucial para crear aplicaciones web dinámicas, ya que permite interactuar con el navegador más allá del contenido HTML. Dominar sus objetos principales —window, navigator, location, history, y screen— junto con las funciones asincrónicas como setTimeout y setInterval, brinda a los desarrolladores herramientas poderosas para controlar la experiencia del usuario.