PARTHA SARATHI

Posted on May 7

What is DOM and BOM in Javascript?

#javascript #webdev #programming #beginners

What is BOM in javascript?

Browser object model are basically objects provided by the browser environment that allows you to interact with the browser window and everything outside the Webpage’s content.

Now the question comes what is a window?

window is like the global desk where your tools (functions, variables, APIs) are laid out.

Imagine the browser gives you a giant invisible object called window. When your script runs:

If you write var x = 5, it’s stored as window.x.
If you write function sayHi() {}, it’s stored as window.sayHi.
If you use alert() or setTimeout(), they’re actually window.alert() and window.setTimeout().

You're not writing code in window, but the browser automatically puts your global code on window.

Think of the BOM as everything you can access on the browser level, like:

opening/closing new tabs,
getting screen size,
managing the URL or location bar,
setting timeouts,
interacting with the browser history.

Components of Browser window model

BOM Component	Description
`window`	The top-level object; global scope for browser-based JavaScript.
`navigator`	Provides information about the browser and device (e.g. userAgent, online).
`location`	Allows access to and manipulation of the current URL.
`history`	Lets you navigate through the browser's session history (back, forward).
`screen`	Provides information about the user's screen (e.g. width, height).
`alert`, `prompt`, `confirm`	Built-in dialog methods exposed by the BOM.
`setTimeout`, `setInterval`	Timer functions available through the BOM.

So to see this in action you can go to any web page and do inspect element and try running

console.log(window.innerHeight); //window
console.log(navigator.userAgent); // navigator
setTimeout(() => console.log("Hello"), 1000);
alert("Hi!"); //alert
const name = prompt("Your name?"); //prompt
const confirmed = confirm("Are you sure?"); //confirm
history.back(); // history

Use cases of BOM

Dynamic Browser Control: The BOM allows developers to control browser windows and perform operations like resizing, opening, and closing windows.
URL Manipulation: Through the location object, developers can retrieve, modify, and navigate URLs dynamically.
Browser and Device Information: The navigator object provides details about the user's browser, operating system, and hardware capabilities.
Screen and Resolution Access: Developers can access screen properties like width, height, and pixel depth for responsive design.
Session History Navigation: The history object enables smooth navigation through the user's browsing history.
Cookie Management: Using the document.cookie property, developers can set, retrieve, and delete cookies for session management.
Event Handling and Timers: Functions like setTimeout and setInterval allow scheduling and periodic execution of tasks.s the current web address (URL) and allows changes within the Browser Object Model (BOM).

What is DOM in javascript?

The DOM is a programming interface provided by the browser that represents the structure of a web page (HTML or XML) as a tree of objects. Each element (like <div>, <h1>, <a>, etc.) becomes a node in this tree, and JavaScript can interact with these nodes to read or change content, structure, or styling dynamically.

for example of this code

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

The tree structure would look like :

Document
└── html
    ├── head
    │   └── title
    │       └── "My Page"
    └── body
        ├── h1
        │   └── "Hello"
        └── p
            └── "This is a paragraph."

Types of Nodes in the DOM

Document Node – the root (i.e. document)
Element Nodes – all HTML tags like <body>, <h1>, <div>, etc.
Text Nodes – the text inside elements
Attribute Nodes – attributes like id="main" or class="header"
Comment Nodes – HTML comments ()

Common DOM Methods

You can use these to interact with the page:

Selecting Elements:


document.getElementById("myId");
document.querySelector(".myClass");
document.getElementsByTagName("p");

Changing Content:

element.innerHTML = "New content";
element.textContent = "New text only";

Modifying Attributes:


element.setAttribute("class", "new-class");
element.getAttribute("id");

Changing Styles:

element.style.color = "red";

Adding/Removing Elements:

const newDiv = document.createElement("div");
document.body.appendChild(newDiv);
element.remove(); // removes the element

DOM Events

JavaScript can react to user actions using event listeners:


document.getElementById("btn").addEventListener("click", function () {
  alert("Button clicked!");
});

Why is the DOM important?

It connects HTML/CSS with JavaScript
Enables dynamic content (e.g., adding items to a list, showing/hiding elements)
Essential for modern interactive websites

Top comments (2)

lionel-rowe • May 8