What are the main differences between BOM and DOM?

In one line

The rule

The DOM (Document Object Model) is a programming interface for HTML and XML documents. It represents the structure and content of a web page, allowing scripts to change elements, text, and style. The BOM (Browser Object Model) is a programming interface for interacting with the browser window and its features, like navigation, alerts, and history.

Let's understand it simply

Imagine your web browser (like Chrome or Firefox) is a house. The DOM is like the furniture and rooms inside the house — you can move chairs, repaint walls, or change the TV channel. The BOM is like the house itself — you can open or close windows, check the address, or look at the history of who visited.

So, DOM is about what’s INSIDE the web page. BOM is about the browser and its features OUTSIDE the page.

How it works

1. When you open a web page, the browser creates a DOM for its content.
2. JavaScript can use the DOM to change text, images, or styles on the page.
3. The browser also creates a BOM to let scripts control things like alerts, the address bar, or browser history.
4. JavaScript can use the BOM to open new tabs, show pop-ups, or go back in history.

The story behind it

The DOM was created to let web pages become interactive. Before DOM, web pages were static — you could not change them after loading. The BOM came from the need to let scripts talk to the browser itself, not just the page. Both ideas grew as browsers became smarter in the late 1990s.

Where you see it in real life

• DOM: Changing the text of a button when you click it (like a cricket score update).
• DOM: Showing or hiding a menu when you tap a button on a mobile website.
• DOM: Filling a form and seeing instant feedback (like “Email already used”).
• BOM: Showing an alert box (like alert('Welcome!')) — uses the browser’s pop-up feature.
• BOM: Opening a new tab or window with window.open('https://ncert.nic.in').
• BOM: Going back to the previous page with window.history.back().

Why it matters

• DOM is the base for all web page interactivity — every modern website uses it.
• BOM lets you control browser features, making web apps more powerful.
• Understanding both is needed for web development jobs and higher studies.
• Many exam questions ask you to compare or give examples of DOM vs BOM.

Common mistakes

• Mixing up DOM and BOM — remember, DOM is for the page, BOM is for the browser.
• Thinking alert() or window.open() are part of DOM — they are BOM features.
• Forgetting that not all browsers support every BOM feature the same way.

Remember it

DOM = Document (the page). BOM = Browser (the window). Page vs. browser.