Understanding DOM and BOM

What is the DOM?

The Document Object Model (DOM) is a tree-like representation of an HTML page that JavaScript can use to access and manipulate elements, attributes, and content.

document.getElementById("title").innerText = "New Title";
document.querySelector(".box").style.color = "red";

What is the BOM?

The Browser Object Model (BOM) allows JavaScript to interact with the browser itself, outside the page content — things like the window, navigation history, and screen.

Common BOM Objects

• window — the global browser window object.
• navigator — information about the browser.
• location — the current URL, allows redirection.
• history — the browser's session history.
• screen — information about the user's screen.

DOM vs BOM

The DOM deals with the content of the web page, while the BOM deals with the browser window surrounding that page.