DOM vs. BOM

When writing JavaScript for websites, you interact with two main models. While they often work together, they control completely different things.

1. The BOM (Browser Object Model)

The BOM represents the browser window itself. It allows JavaScript to talk to the browser, not just the page content.

Root Object: window
Scope: Everything outside the page content (URL bar, back button, browser screen size).
Standardization: Historically unofficial, but modern browsers mostly agree on the standards.

Key BOM Objects

window: The global object. Represents the browser tab.
navigator: Info about the browser (Chrome/Firefox, OS, battery status).
location: The URL bar (allows you to redirect the user).
history: The back/forward buttons.
screen: The user's physical monitor resolution.

Example (BOM):

// Redirect the user (BOM)
window.location.href = "[https://google.com](https://google.com)";

// Check browser language (BOM)
console.log(navigator.language); 

// Get screen width (BOM)
console.log(screen.width);

2. The DOM (Document Object Model)

The DOM represents the content of the web page. It treats the HTML document as a tree structure that JavaScript can modify.

Root Object: document (which is actually a property of window, i.e., window.document).
Scope: The HTML tags, text, images, and styles inside the viewport.
Standardization: Strictly standardized by the W3C.

Key DOM Operations

document.getElementById()
document.querySelector()
element.innerHTML
element.style.color

Example (DOM):

// Change the text of an H1 tag (DOM)
document.getElementById("title").innerText = "Hello World";

// Change background color (DOM)
document.body.style.backgroundColor = "red";

3. The Hierarchy (How they fit together)

The BOM is the parent. The DOM is just one child inside the BOM.

Your browser tab (window) contains the page (document).

window (BOM)
├── navigator
├── location
├── history
├── screen
└── document (DOM) ◄── The Page Content
    ├── <html>
    │   ├── <head>
    │   └── <body>
    │       ├── <h1>
    │       └── <p>

Summary Comparison

Feature

BOM (Browser Object Model)

DOM (Document Object Model)

What it controls

The Browser (Window, URL, History)

The Page (HTML, Content, CSS)

Root Object

window

window.document

Primary Use

Redirecting, detecting browser info, alerts.

Changing text, colors, adding HTML.

Example

window.alert("Hi")

document.body.innerText = "Hi"

PreviousEnvironments & Execution NextVariables & Identifiers

Last updated 8 days ago

hashtag1. The BOM (Browser Object Model)

hashtagKey BOM Objects

hashtag2. The DOM (Document Object Model)

hashtagKey DOM Operations

hashtag3. The Hierarchy (How they fit together)

hashtagSummary Comparison