DOM vs BOM

The Document Object Model (DOM) represents a document as a tree of nodes that code can inspect and change. The Browser Object Model (BOM) is an informal name for browser-provided objects that expose the page's surrounding browsing environment, commonly through window.

Window and browser environment
├── location, history, navigator, screen, timers
└── document
    └── DOM tree
        ├── html
        ├── head
        └── body

One-line idea: The DOM models the loaded document, while BOM-style APIs expose the browser context around that document.

Core Concepts

What Is the DOM?

When a browser parses HTML, it creates an in-memory tree of objects. The DOM provides interfaces for reading and changing that tree.

<main>
  <h1 id="title">Hello</h1>
  <button>Save</button>
</main>

The structure can be pictured as:

Document
└── html
    └── body
        └── main
            ├── h1#title
            │   └── "Hello"
            └── button
                └── "Save"

JavaScript can use DOM APIs to modify it:

const title = document.querySelector("#title");
title.textContent = "Welcome";

const message = document.createElement("p");
message.textContent = "Changes saved";
document.querySelector("main").appendChild(message);

Common DOM Responsibilities

The DOM is commonly used to:

• find elements and traverse node relationships
• read or update text and attributes
• create, move and remove nodes
• attach event listeners
• work with forms and document content
• change classes and inline styles

const form = document.querySelector("form");

form.addEventListener("submit", (event) => {
  event.preventDefault();
  form.classList.add("submitted");
});

The DOM is a Web API, not part of the core JavaScript language. JavaScript environments such as Node.js do not provide a browser document automatically.

What Is the BOM?

Browser Object Model is a teaching term for APIs that represent or interact with the browser environment outside the document tree. Unlike the DOM, BOM is not one formal object model defined by a single specification.

Its common entry point is the Window object:

console.log(window.innerWidth);
console.log(window.location.href);

In a normal browser tab, window is also the global object for page scripts. Many properties are therefore available with or without the window. prefix:

window.setTimeout(showMessage, 1000);
setTimeout(showMessage, 1000);

Writing window. explicitly can make the browser dependency clearer.

Common Browser-Environment Objects

Object or API	Purpose	Example
window	Current window or tab's browsing context	window.innerWidth
location	Current URL and navigation	location.assign("/account")
history	Current tab's session history	history.back()
navigator	Browser and device capabilities	navigator.language
screen	Information about the physical display	screen.width
Timers	Schedule callbacks	setTimeout(task, 500)
Dialogs	Browser-provided modal prompts	window.confirm("Continue?")

These interfaces are separate Web APIs grouped under the informal BOM label for convenience.

The Relationship Between window and document

The document loaded in a browsing context is available through window.document:

console.log(window.document === document); // true

Window
└── document property -> Document
                         └── DOM nodes

This does not make DOM and BOM identical. Window represents the browsing context, while Document is the root of the loaded document's node tree.

When navigation loads another document, the browsing context continues but its active document changes.

DOM vs BOM

Area	DOM	BOM-style browser APIs
Full name	Document Object Model	Browser Object Model, an informal term
Main focus	Document structure and content	Browsing context and browser environment
Common root object	document	window
Represents	Nodes such as elements, text and comments	URL, history, viewport, display and browser capabilities
Typical operation	Change a heading or create an element	Navigate, read viewport size or schedule a timer
Formal standard	DOM and related specifications	Collection of APIs from multiple specifications
Availability	Can be implemented for HTML or XML documents	Specific to browser-like environments
Security scope	Access to the current permitted document	Restricted access to browser and cross-origin capabilities

Practical DOM Examples

Update Page Content

const status = document.querySelector("[data-status]");

status.textContent = "Online";
status.classList.add("success");
status.setAttribute("aria-live", "polite");

This code works with nodes and attributes inside the document, so it uses the DOM.

Create and Insert an Element

const item = document.createElement("li");
item.textContent = "Review pull request";

document.querySelector("#tasks").appendChild(item);

The Document, Element and Node interfaces provide these operations.

Handle a Document Event

document.querySelector("button").addEventListener("click", (event) => {
  event.currentTarget.textContent = "Saved";
});

The event updates an element in the document. Other event targets, such as window, also exist outside the DOM tree.

Practical BOM Examples

Read and Change the URL

console.log(window.location.pathname);

window.location.assign("/settings");

Assigning a location starts navigation. It is not the same as changing text or elements in the current DOM.

Work with Session History

history.pushState({ tab: "billing" }, "", "/settings/billing");

window.addEventListener("popstate", (event) => {
  renderSettingsTab(event.state?.tab ?? "profile");
});

The History API can update the current entry's URL without loading a new document. Application code must then update the DOM to display the matching view.

History API changes URL state
              ↓
Application reads the route
              ↓
DOM APIs render the matching content

This is a common example of BOM-style and DOM APIs working together.

Read Viewport and Screen Information

console.log(window.innerWidth); // Viewport width
console.log(screen.width);      // Display width reported by the browser

The viewport and physical screen are different. For responsive presentation, prefer CSS media queries rather than branching all layout logic in JavaScript:

@media (width >= 48rem) {
  .sidebar {
    display: block;
  }
}

When JavaScript genuinely needs to react to a media query, use matchMedia():

const wideLayout = window.matchMedia("(width >= 48rem)");

wideLayout.addEventListener("change", (event) => {
  console.log("Wide layout:", event.matches);
});

Use Timers

const timerId = window.setTimeout(() => {
  console.log("Finished waiting");
}, 1000);

window.clearTimeout(timerId);

The delay is a minimum scheduling delay, not a guarantee that the callback runs at an exact time. Busy main-thread work and browser throttling can postpone it.

Detect Capabilities

Prefer feature detection over guessing behavior from the browser's user-agent string:

if ("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition(showPosition);
}

Many powerful browser APIs also require a secure context, explicit permission or a user action.

Browser Contexts and Restrictions

Each Frame Has Its Own Window and Document

A top-level tab and each iframe have separate browsing contexts:

Top-level Window
├── Top-level Document
└── iframe
    └── Child Window
        └── Child Document

Useful references include:

window.self;   // Current window
window.parent; // Parent browsing context
window.top;    // Top-level browsing context

The same-origin policy limits access to the DOM and sensitive properties of cross-origin frames.

Page Scripts Do Not Control the Entire Browser

The BOM mental model does not mean a website can freely control browser chrome, other tabs, saved passwords or user files. Browsers restrict these capabilities for security and privacy.

Examples of restrictions include:

• popup blockers and user-activation requirements
• same-origin checks for windows and frames
• permissions for camera, microphone and location
• limited session-history manipulation
• privacy protections around device information

Workers Do Not Have window or document

Web Workers run outside the page's browsing context:

// In a worker
console.log(globalThis);
// window and document are not available

Workers use a worker global scope and cannot manipulate the DOM directly. They communicate with the page by sending messages.

Using DOM and BOM Together

Responsive Status Example

const output = document.querySelector("#viewport-status");

function updateViewportStatus() {
  output.textContent = `Viewport width: ${window.innerWidth}px`;
}

window.addEventListener("resize", updateViewportStatus);
updateViewportStatus();

Here:

• window.innerWidth and the resize event describe the browsing environment.
• document.querySelector() and textContent update the DOM.

Navigation Confirmation Example

const form = document.querySelector("form");
let hasUnsavedChanges = false;

form.addEventListener("input", () => {
  hasUnsavedChanges = true;
});

window.addEventListener("beforeunload", (event) => {
  if (hasUnsavedChanges) {
    event.preventDefault();
    event.returnValue = true;
  }
});

Use unload warnings sparingly. Browser behavior is intentionally restricted, and saving drafts automatically usually provides a better experience.

Common Mistakes

Mistake	Better approach
Saying DOM and BOM are part of JavaScript itself	Describe them as APIs supplied by the browser environment
Treating BOM as one formal standard	Explain that it is an informal group of browser APIs
Saying window represents the entire browser application	Treat it as the current browsing context or tab environment
Assuming page scripts can control arbitrary tabs or browser UI	Account for security, permission and user-activation restrictions
Saying every object under window is BOM	Recognize that window exposes APIs defined by many specifications, including document
Confusing viewport size with physical screen size	Use innerWidth for viewport and screen for display information
Using navigator.userAgent for feature decisions	Prefer direct feature detection
Expecting timer callbacks to run at an exact time	Treat the delay as a minimum and allow for scheduling delays
Assuming every JavaScript environment has a DOM	Remember that Node.js and Web Workers have different host APIs
Accessing a cross-origin iframe's DOM	Use permitted messaging such as postMessage() instead

Official References

• MDN: Document Object Model
• MDN: Window
• MDN: window.document
• MDN: DOM Scripting Introduction
• MDN: History API

Summary

The DOM models and manipulates document content, while BOM-style APIs expose the surrounding browser context through objects such as window, location, history and navigator.

Browser creates a browsing context
              ↓
Window exposes browser-environment APIs
              ↓
Window contains a reference to the active Document
              ↓
Document provides the root of the DOM tree
              ↓
Application code combines both API groups safely