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.
About the Author
Latest tech news and coding tips.
