JavaScript Browser Object Model (BOM)

The Browser Object Model (BOM) is a set of objects provided by the browser that allows JavaScript to interact with the browser window itself — not just the document (HTML page). Through BOM, operations like navigating to a URL, reading browser information, managing history, and handling the viewport become possible.

The top-level BOM object is window, which represents the browser window and is the global object in browser-side JavaScript.

The window Object

The window object is the global object in the browser. All global variables, functions, and objects (including document, console, setTimeout, and fetch) are properties of window.

// These are all equivalent:
window.console.log("Hello!");
console.log("Hello!");

window.alert("Hi");
alert("Hi");

// Global variable is a property of window
let city = "Mumbai";
console.log(window.city); // Mumbai

Window Dimensions

// Inner dimensions (viewport — excludes browser chrome)
console.log(window.innerWidth);   // e.g., 1366
console.log(window.innerHeight);  // e.g., 768

// Outer dimensions (full browser window including toolbars)
console.log(window.outerWidth);
console.log(window.outerHeight)

Respond to Window Resize

window.addEventListener("resize", () => {
  console.log("Window width:", window.innerWidth);
});

window.location — Current URL Information

The location object holds information about the current URL and can be used to navigate to a new page.

// Read URL details
console.log(window.location.href);      // Full URL
console.log(window.location.hostname);  // e.g., estudy247.com
console.log(window.location.pathname);  // e.g., /javascript-tutorial
console.log(window.location.protocol); // https:
console.log(window.location.port);     // "" or "8080"
console.log(window.location.search);   // ?query=string
console.log(window.location.hash);     // #section-name

Navigate to a New Page

// Navigate and add to browser history
window.location.href = "https://estudy247.com";

// Navigate without adding to history (no back button)
window.location.replace("https://estudy247.com");

// Reload the current page
window.location.reload();

Read Query Parameters

// URL: https://example.com?page=2&search=javascript

let params = new URLSearchParams(window.location.search);
console.log(params.get("page"));    // "2"
console.log(params.get("search"));  // "javascript"

window.history — Browser Navigation History

The history object allows navigation through the browser's session history.

history.back();     // Go to previous page (like browser Back button)
history.forward();  // Go to next page (like browser Forward button)
history.go(-2);     // Go back 2 pages
history.go(1);      // Go forward 1 page

console.log(history.length); // Number of entries in history

Manipulating History Without Reload

// Push a new state without reloading the page (for Single Page Apps)
history.pushState({ page: 2 }, "Page 2", "/page2");

// Replace current history entry
history.replaceState({ page: 1 }, "Home", "/home");

window.navigator — Browser Information

The navigator object provides information about the browser and the user's environment.

console.log(navigator.userAgent);    // Browser user agent string
console.log(navigator.language);     // e.g., "en-IN"
console.log(navigator.platform);     // e.g., "Win32"
console.log(navigator.onLine);       // true if connected to internet
console.log(navigator.cookieEnabled); // true if cookies are enabled

Detect Mobile or Desktop

function isMobile() {
  return /Mobi|Android/i.test(navigator.userAgent);
}

console.log(isMobile()); // true on mobile, false on desktop

Geolocation — Get User's Location

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(
    (position) => {
      console.log("Latitude:",  position.coords.latitude);
      console.log("Longitude:", position.coords.longitude);
    },
    (error) => {
      console.log("Location access denied:", error.message);
    }
  );
} else {
  console.log("Geolocation is not supported by this browser.");
}

window.screen — Screen Information

console.log(screen.width);       // Total screen width in pixels
console.log(screen.height);      // Total screen height in pixels
console.log(screen.colorDepth);  // Color depth (e.g., 24)
console.log(screen.availWidth);  // Available width (excluding taskbar)
console.log(screen.availHeight); // Available height

window.open() and window.close() — Manage Browser Windows

// Open a new tab or popup window
let newWindow = window.open("https://estudy247.com", "_blank");

// Close the opened window (only works if opened by the same script)
newWindow.close();

// Open a popup with specific dimensions
window.open("https://estudy247.com", "Tutorial", "width=800,height=600");

Dialog Boxes

The BOM provides three native browser dialog boxes:

alert() — Show a Message

alert("Welcome to JavaScript Tutorial!");

confirm() — Ask Yes or No

let confirmed = confirm("Are you sure you want to delete this item?");

if (confirmed) {
  console.log("Item deleted.");
} else {
  console.log("Deletion cancelled.");
}

prompt() — Ask for User Input

let name = prompt("What is your name?", "Guest");

if (name) {
  console.log("Hello, " + name + "!");
} else {
  console.log("No name provided.");
}

window.scrollTo() and window.scrollBy()

// Scroll to a specific position
window.scrollTo(0, 0);           // Scroll to top of page
window.scrollTo({ top: 500, behavior: "smooth" }); // Smooth scroll to 500px

// Scroll relative to current position
window.scrollBy(0, 300);         // Scroll down 300px
window.scrollBy({ top: -200, behavior: "smooth" });  // Scroll up 200px

Get Current Scroll Position

window.addEventListener("scroll", () => {
  console.log("Scroll X:", window.scrollX);
  console.log("Scroll Y:", window.scrollY);
});

Practical Example — Back to Top Button

<button id="topBtn" onclick="scrollToTop()">Back to Top</button>

<script>
let topBtn = document.getElementById("topBtn");

window.addEventListener("scroll", () => {
  topBtn.style.display = window.scrollY > 300 ? "block" : "none";
});

function scrollToTop() {
  window.scrollTo({ top: 0, behavior: "smooth" });
}
</script>

BOM Object Summary

Key Points to Remember

• The BOM allows JavaScript to interact with the browser environment beyond the HTML document
• The window object is the global object — all global variables and built-in functions are its properties
• window.location gives current URL details and allows programmatic navigation
• URLSearchParams is the clean way to read query string parameters from the URL
• window.history enables back/forward navigation and URL manipulation without page reload
• window.navigator provides browser, device, and connectivity information
• navigator.geolocation provides access to the user's physical location (requires permission)
• alert(), confirm(), and prompt() are synchronous and block the page — use them sparingly