The Browser Object Model (BOM) is the set of global objects — window, location, history, navigator, and screen — that let JavaScript interact with the browser itself, not just the page's content. This lesson covers what each object controls, from redirecting the URL to reading connectivity and display metadata.
1JS BOM Intro | JavaScript Tutorial - In-Depth Guide Part 1
While the DOM handles the document, the BOM (Browser Object Model) handles the window itself. It is the environment where JS lives.
// The Browser EnvironmentBOM Fundamentals
2JS BOM Intro | JavaScript Tutorial - In-Depth Guide Part 2
The 'window' object is the global root. Everything in the browser exists inside it, including the 'document'.
console.log(window.innerWidth);
console.log(window.document); // DOM lives hereThe Global Root
⬇️
document
3JS BOM Intro | JavaScript Tutorial - In-Depth Guide Part 3
The 'location' object handles the URL. You can use it to redirect users or refresh the current page.
window.location.href = 'https://google.com';
window.location.reload();Location Object
4JS BOM Intro | JavaScript Tutorial - In-Depth Guide Part 4
The 'history' object allows you to move back and forward through the user's session history programmatically.
window.history.back();
window.history.go(-2); // Back two pagesHistory Object
5JS BOM Intro | JavaScript Tutorial - In-Depth Guide Part 5
The 'navigator' object provides info about the browser itself, like if the user is online or which browser they use.
console.log(navigator.userAgent);
if (navigator.onLine) {
console.log('Connected!');
}Navigator Object
6JS BOM Intro | JavaScript Tutorial - In-Depth Guide Part 6
The 'screen' object contains details about the physical display, like width, height, and color depth.
console.log(screen.width);
console.log(screen.colorDepth);Screen Object
7JS BOM Intro | JavaScript Tutorial - In-Depth Guide Part 7
Control the Box: With the BOM, you don't just control the website—you control the browser tab it runs in.
<h1>BOM: Mastered</h1>Mastery
8JS BOM Intro | JavaScript Tutorial - In-Depth Guide Part 8
BOM fundamentals secured! You now understand the full global scope of your application.
<h1>Global Scope: Controlled</h1>Global Scope Controlled
9JS BOM Intro | JavaScript Tutorial - In-Depth Guide Part 9
Next, we'll dive into 'Closures'—one of the most powerful and misunderstood concepts in JavaScript.
<h1>Next: Closures</h1>On to Closures
10Step-by-Step Breakdown
While the DOM handles the document, the BOM (Browser Object Model) handles the window itself. It is the environment where JS lives.
The 'window' object is the global root. Everything in the browser exists inside it, including the 'document'.
The 'location' object handles the URL. You can use it to redirect users or refresh the current page.
Checkpoint: Which sub-object of 'window' would you use to change the current URL and navigate away?
- →window.history
- →window.location
- →window.screen
The 'history' object allows you to move back and forward through the user's session history programmatically.
The 'navigator' object provides info about the browser itself, like if the user is online or which browser they use.
Checkpoint: How do you check if the user is currently connected to the internet using the navigator object?
- →navigator.status
- →navigator.onLine
- →navigator.connected
The 'screen' object contains details about the physical display, like width, height, and color depth.
Control the Box: With the BOM, you don't just control the website—you control the browser tab it runs in.
Checkpoint: Is the 'document' object part of the 'window' object in the browser?
- →Yes, window is the parent of everything
- →No, they are completely separate
BOM fundamentals secured! You now understand the full global scope of your application.
Next, we'll dive into 'Closures'—one of the most powerful and misunderstood concepts in JavaScript.
Level Up 🚀
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1Warn Screen Reader Users Before Programmatic Redirects or Reloads
Calling `location.href = ...` or `location.reload()` in response to a user action abruptly changes or resets the page context, which can disorient screen reader users who aren't expecting the navigation. Announce the pending redirect via an `aria-live` region, or use a standard link/form submission when the navigation isn't purely a side effect of unrelated logic.
SEO Implications
- 1
Client-Side Redirects via location.href Are Weaker Signals to Search Engines Than Server-Side Redirects
A JavaScript-driven redirect (setting window.location.href after the page has already loaded) requires a crawler to execute the script to discover the destination, and doesn't pass link equity as cleanly as an HTTP 301/302 redirect configured on the server. Use server-side redirects for permanent URL changes whenever possible.
Best Practices
Check navigator.onLine Before Assuming a Network Request Will Succeed, But Don't Rely on It Alone
navigator.onLine tells you whether the device has any network connection, not whether a specific server is reachable — a device can be 'online' but still unable to reach your API. Use it as a quick early check, but always handle fetch()/request failures with proper try/catch regardless of what navigator.onLine reports.
Prefer history.back() Over a Hardcoded location.href for 'Go Back' Buttons
Hardcoding a specific URL for a back button breaks if the user arrived from a different page than expected. history.back() correctly returns the user to whatever page they actually came from, matching the behavior of the browser's own back button.
Frequent Bugs
Calling window.history.back() and having it silently do nothing.
history.back() only works if there's a previous entry in the browser's session history for that tab — if the page was opened directly (a fresh tab, a bookmark, or an external link opening in a new tab), there's nothing to go back to. Check history.length or provide a fallback destination (like a fixed 'home' URL) for this case.
Using location.href for a redirect where reload() was actually intended (or vice versa), causing unexpected navigation history entries.
location.href = url navigates to a new URL and adds a new history entry, while location.reload() re-fetches the current URL without adding one. Use location.replace(url) instead of location.href when you want to redirect without leaving the original page in the back-button history.
Real-World Examples
Building an Offline-Aware Fetch Wrapper
A web app needed to show a friendly offline message before attempting an API call, rather than letting the request fail with a generic network error, using the navigator object's connectivity property as an early check.
async function safeFetch(url) {
if (!navigator.onLine) {
throw new Error('You appear to be offline. Please check your connection.');
}
const response = await fetch(url);
return response.json();
}