Browser BOM (Browser Object Model)
The Browser Object Model (BOM) allows JavaScript to interact with the web browser itself — not just the content of a webpage.
It provides objects that let developers control browser windows, interact with the user, manage navigation, and handle browser-related information.
What is the Browser Object Model (BOM)?
While the DOM (Document Object Model) deals with the HTML document,
the BOM deals with the browser environment — the window that displays the document.
Main BOM Objects
The main objects of the Browser Object Model include:
The window Object
The window object is the global object in the browser — everything runs inside it.
Example:
console.log(window.innerWidth); // Width of browser window
console.log(window.innerHeight); // Height of browser window
alert("Hello from the window object!");
The location Object
The location object represents the current page URL and allows navigation.
Example:
console.log(location.href); // Full URL
console.log(location.hostname); // Domain
console.log(location.pathname); // File path
console.log(location.protocol); // Protocol (http/https)
Redirecting:
location.href = "<https://www.google.com>";
Reloading Page:
location.reload(); // Reloads the current page
The history Object
The history object gives access to the browser’s session history.
Example:
history.back(); // Go to previous page
history.forward(); // Go to next page
history.go(-2); // Go back two pages
The navigator Object
The navigator object provides information about the browser and user environment.
Example:
console.log(navigator.userAgent); // Browser info
console.log(navigator.language); // User language
console.log(navigator.onLine); // true if connected to internet
The screen Object
The screen object provides information about the user’s screen.
Example:
console.log(screen.width); // Screen width
console.log(screen.height); // Screen height
console.log(screen.availWidth); // Available width (excluding OS taskbar)
console.log(screen.colorDepth); // Number of bits used to display colors
The document Object (Link Between BOM & DOM)
Although the document object is technically part of the DOM,
it is accessed through the BOM via window.document.
Example:
console.log(window.document.title); // Access HTML document title
Opening, Closing, and Moving Windows
You can create and control browser windows/tabs.
Open a new window:
let win = window.open("<https://example.com>", "_blank", "width=400,height=400");
Close a window:
win.close();
Move/resize:
win.resizeTo(800, 600);
win.moveTo(100, 100);
Example – Using BOM Objects Together
<!DOCTYPE html>
<html>
<body>
<h2>BOM Example</h2>
<button onclick="showInfo()">Show Info</button>
<script>
function showInfo() {
alert(`
URL: ${location.href}
Browser: ${navigator.appName}
Screen: ${screen.width}x${screen.height}
Online: ${navigator.onLine}
`);
}
</script>
</body>
</html>
Difference Between DOM and BOM
| Feature | DOM | BOM |
|---|---|---|
| Purpose | Manipulates webpage content | Interacts with browser |
| Root Object | document | window |
| Access | HTML elements and structure | Browser properties and functions |
| Example | document.getElementById() | window.alert(), location.href |