BOM and DOM

When JavaScript runs in a browser, it has access to two environments: the BOM and the DOM.

The DOM — Document Object Model

The DOM represents the HTML structure of your page as a tree of objects. Every element — <div>, <p>, <button> — becomes a node you can select, read, and modify.

document.querySelector("h1").textContent = "New title";

document is the entry point to the DOM. Everything visible on the page lives here.

The BOM — Browser Object Model

The BOM represents the browser itself — things outside the document: the window, URL, history, and screen.

window.innerWidth; // viewport width in pixels
window.location.href; // current URL
window.location.reload(); // reload the page
window.history.back(); // go back
window.scrollTo(0, 0); // scroll to top

window is the global object in browsers. Any variable you declare at the top level becomes a property of window, which is why console.log and setTimeout work without importing anything — they live on window.

The Overlap

The DOM is technically part of the BOM — document is a property of window:

window.document === document; // true

In practice, people use “DOM” to mean page structure and “BOM” to mean browser features. The distinction helps you know what you’re dealing with.

Summary