JavaScript Browser Object Model (BOM)

The Browser Object Model (BOM) refers to all the JavaScript-accessible objects provided by the web browser (not the web page) that allow developers to interact with the browser itself — things like the window, the screen, the browser history, the location bar, and pop-ups.

Learn JavaScript from the comfort of your home

While the DOM is about the document (HTML), the BOM is about the browser environment.

BOM vs DOM (Quick Difference)

Feature	DOM	BOM
What it Represents	HTML document	Browser environment
Provided by	Browser	Browser
Examples	document, elements, nodes	window, navigator, location, history
Purpose	Manipulate page content	Interact with browser features

1. The window Object (The ROOT of BOM)

The window object is the global object for JavaScript running in the browser.

Everything in the BOM hangs from window.

Examples:

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

Common Window Methods

Method	Description
alert()	Displays popup alert
confirm()	OK/Cancel popup
prompt()	Input popup
setTimeout()	Run function once after delay
setInterval()	Run function repeatedly
clearTimeout()	Stop timeout
clearInterval()	Stop interval

Example:

setTimeout(() => {
  console.log("This runs after 3 seconds");
}, 3000);

2. window.location Object — URL Information & Navigation

Controls and retrieves parts of the current browser URL.

Common Properties

Property	Description
location.href	Full URL
location.hostname	Domain
location.pathname	Page path
location.search	Query string
location.hash	Fragment (#)
location.protocol	http: / https:

Methods

Method	Description
location.assign()	Load a new page
location.replace()	Replace current page (no back button)
location.reload()	Refresh page

Example:

console.log(location.href);
location.reload();

3. window.history Object — Browser Navigation

Allows JavaScript to move forward/backward in the browsing history.

Methods

Method	Description
history.back()	Go to previous page
history.forward()	Go to next page
history.go(n)	Move n steps (-1, +1, etc.)

Example:

history.go(-1); // Equivalent to back()

4. window.screen Object — Device Screen Info

Provides information about the user’s screen.

Common Properties

Property	Description
screen.width	Screen width
screen.height	Screen height
screen.availWidth	Available width
screen.availHeight	Available height

Example:

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

5. window.navigator Object — Browser & Device Metadata

Gives information about the browser and environment.

Useful Navigator Properties

Property	Description
navigator.userAgent	Browser/OS details
navigator.language	User’s language
navigator.onLine	Online/offline status
navigator.geolocation	GPS access (requires permission)

Example:

console.log(navigator.language);
console.log(navigator.onLine);

Geolocation Example

navigator.geolocation.getCurrentPosition(pos => {
  console.log(pos.coords.latitude, pos.coords.longitude);
});

6. Popup Control (open, close, moveTo, resizeTo)

Open a new popup window

let popup = window.open("https://example.com", "_blank", "width=500,height=500");

Close it

popup.close();

7. Timers — setTimeout & setInterval

Already part of window, but extremely important.

Example: Interval

let i = 0;
let timer = setInterval(() => {
  console.log("Tick: " + i++);
  if (i === 5) clearInterval(timer);
}, 1000);

8. Cookies via BOM

You can access cookies using:

document.cookie = "username=John; expires=Fri, 31 Dec 2025 23:59:59 GMT";
console.log(document.cookie);

Summary Table of BOM Objects

BOM Object	Purpose
window	Root of everything
location	URL navigation
history	Forward/back navigation
screen	Screen/device display info
navigator	Browser/system info
alert/prompt/confirm	Popup dialogs
setTimeout/setInterval	Timers

The BOM (Browser Object Model) is the set of JavaScript-accessible objects provided by the browser that let you interact with browser features such as navigation, history, screen, popups, timers, and browser metadata.