El BOM (Browser Object Model) es un conjunto de interfaces y objetos en JavaScript que permiten interactuar con el navegador y su entorno (como la ventana, la pantalla, la URL y el historial).
A diferencia del Document Object Model (DOM), que manipula el contenido de la página web, el BOM está orientado a interactuar con el navegador y sus características.
Los principales elementos que conforman el Browser Object Model (BOM) son:
| Elemento del BOM | Descripción |
|---|---|
window | Representa la ventana del navegador |
navigator | Proporciona información sobre el navegador |
screen | Representa la pantalla del usuario |
location | Contiene información sobre la URL actual (permite cambiarla) |
document | Representa el contenido de la página web |
history | Permite manipular el historial de navegación del navegador, |
console | Proporciona métodos para la depuración |
performance | Proporciona acceso a la información de rendimiento de la página web |
applicationCache | Permite acceder a la caché de la aplicación (en desuso) |
Vamos a ver cada uno de ellos en detalle 👇
Ventana del navegador window
El objeto global window representa la ventana del navegador y es la raíz del BOM. A través de window se pueden acceder a muchas de las propiedades y métodos del BOM.
| Comando | Descripción |
|---|---|
window.innerHeight | Obtiene la altura de la ventana del navegador. |
window.innerWidth | Obtiene el ancho de la ventana del navegador. |
window.resizeTo(500, 500) | Cambia el tamaño de la ventana a 500x500 píxeles. |
window.status = "Cargando..." | Modifica el texto de la barra de estado. |
window.setDefaultStatus("Listo") | Establece el texto predeterminado de la barra de estado. |
Por ejemplo,
console.log(window.innerHeight); // Altura de la ventana
console.log(window.innerWidth); // Ancho de la ventanaInformación del navegador navigator
El objeto navigator proporciona información sobre el navegador que está siendo utilizado. Entre otras cosas, se puede utilizar para detectar el nombre y la versión del navegador, así como la plataforma en la que se está ejecutando.
| Comando | Descripción |
|---|---|
navigator.userAgent | Muestra información sobre el navegador. |
navigator.platform | Muestra la plataforma en la que se ejecuta el navegador. |
Por ejemplo,
console.log(navigator.userAgent); // Información sobre el navegador
console.log(navigator.platform); // Plataforma en la que se está ejecutandoInformación de la pantalla screen
El objeto screen representa la pantalla del usuario y proporciona información sobre su tamaño y resolución.
| Comando | Descripción |
|---|---|
screen.width | Obtiene el ancho de la pantalla. |
screen.height | Obtiene la altura de la pantalla. |
screen.availWidth | Ancho disponible de la pantalla. |
screen.availHeight | Altura disponible de la pantalla. |
screen.pixelDepth | Profundidad de píxeles de la pantalla. |
Por ejemplo,
console.log(screen.width); // Ancho de la pantalla
console.log(screen.height); // Altura de la pantalla
console.log(screen.availWidth); // Ancho disponible de la pantalla
console.log(screen.availHeight); // Altura disponible de la pantalla
console.log(screen.pixelDepth); // Profundidad de píxeles de la pantallaInformación de la URL location
El objeto location proporciona información sobre la URL actual y permite redirigir a otras páginas.
| Comando | Descripción |
|---|---|
location.href | Obtiene la URL actual. |
location.host | Obtiene el host de la URL actual. |
location.pathname | Obtiene la ruta de la URL actual. |
location.href = "https://www.ejemplo.com" | Redirige a otra página. |
Por ejemplo,
console.log(location.href); // URL actual
console.log(location.host); // Host de la URL actual
console.log(location.pathname); // Ruta de la URL actual
location.href = "https://www.ejemplo.com"; // Redireccionar a otra páginaDocumento document
El objeto document representa la página web cargada en la ventana del navegador y es la raíz del DOM.
| Comando | Descripción |
|---|---|
document.title | Obtiene el título de la página. |
document.body | Obtiene el cuerpo de la página. |
Por ejemplo,
// Título de la página
console.log(document.title);
// Cuerpo de la página
console.log(document.body);
// Elemento con el ID "miElemento"
console.log(document.getElementById("miElemento")); A través de document se pueden acceder a los elementos de la página web y manipular su contenido. Lo hemos visto intesivamente el resto de artículos dedicados al DOM.
Historial del navegador history
JavaScript permite modificar el historial del navegador utilizando el objeto history. Por ejemplo, podemos agregar una nueva entrada en el historial del navegador utilizando el método pushState().
| Comando | Descripción |
|---|---|
history.pushState(...) | Agrega una nueva entrada al historial con una URL modificada. |
history.replaceState(...) | Reemplaza la entrada actual del historial con una nueva URL. |
Por ejemplo,
// agrega una nueva entrada en el historial del navegador
// con una URL que contiene el parámetro `page` con el valor `1`.
history.pushState({page: 1}, "Title", "?page=1");
// reemplaza la entrada actual en el historial con una nueva entrada
// con una URL que contiene el parámetro `page` con el valor `2`.
history.replaceState({page: 2}, "Title", "?page=2");Información de rendimiento performance
El objeto performance proporciona acceso a la información relacionada con el rendimiento de la página web, como los tiempos de carga y los eventos de navegación.
| Comando | Descripción |
|---|---|
performance.now() | Devuelve el tiempo en milisegundos desde que comenzó la navegación o la carga de la página. |
performance.timing | Proporciona un objeto con detalles sobre los tiempos de navegación y carga de la página. |
performance.getEntries() | Devuelve todas las entradas de rendimiento disponibles. |
Por ejemplo, para medir el tiempo exacto transcurrido desde que se cargó la página:
// Tiempo en milisegundos desde el inicio de la carga
console.log(performance.now()); Esto es útil para medir la velocidad de carga de la página, analizar el rendimiento de la aplicación y realizar optimizaciones basadas en los datos recolectados.
Caché de la aplicación applicationCache
El objeto applicationCache permite gestionar la caché de la aplicación web, lo que facilita el almacenamiento de recursos (como archivos CSS, imágenes y JavaScript) para su uso offline.
| Comando | Descripción |
|---|---|
applicationCache.status | Devuelve el estado actual del caché de la aplicación. |
applicationCache.update() | Fuerza la actualización de la caché de la aplicación. |
Por ejemplo, para verificar el estado de la caché de la aplicación:
// Estado de la caché (por ejemplo, 0 = no caché, 1 = caché en uso)
console.log(applicationCache.status); También podemos añadir eventos relacionados con el estado de la caché, como cached, updateready, y error.
applicationCache.addEventListener("event", callback)Este objeto está en desuso (en favor de los Service Workers), aunque puede seguir siendo útil para aplicaciones más antiguas que necesitan acceso a la caché del navegador.