BOM and DOM - Do you know the differences?

Posted by

  



When working with JavaScript in the context of a web browser, two fundamental concepts quickly emerge: BOM (Browser Object Model) and DOM (Document Object Model). Although often mentioned together, they play different roles in the management of a web page. 

In this article we will clarify what they are, what they are for, how to use them and above all what the differences are between BOM and DOM.

🔗 Do you like Techelopment? Check out the site for all the details!

💻What is the BOM?

Definition

The Browser Object Model (BOM) is a set of objects provided by the browser that allows JavaScript to interact with the environment surrounding the web page, namely the browser same.

What is it for

The BOM allows you to:

  • Open and close windows (window.open(), window.close())

  • Navigate URLs (window.location)

  • Show popups (alert(), confirm(), prompt())

  • Manage history (window.history)

  • Detect browser and screen information (navigator, screen)

Basically, the BOM provides the interface between JavaScript and the browser.

How to use it

Here are some practical examples:

// Open a new window
window.open("https://www.example.com");

// Show a confirmation message
if (confirm("Are you sure you want to continue?")) {
    console.log("Confirmed");
}

// Redirect the user
window.location.href = "https://www.othersite.com";


Objects available in the BOM

Here is a list of the main BOM (Browser Object Model) objects, i.e. the objects that JavaScript can use to interact with the browser (not with the HTML page):

🔹 window

  • Global object representing the browser window.

  • All other BOM objects are properties of window.

  • Examples:

    • window.open() – opens a new window

    • window.alert() – show a message

    • window.setTimeout() – execute code after a delay

🔹 navigator

  • Contains information about the user's browser.

  • Common properties:

    • navigator.userAgent – string with browser info

    • navigator.language – set language

    • navigator.onLine – connection status

    • navigator.geolocation – location access (with permission)

🔹 screen

  • Provides details about the device screen.

  • Common properties:

    • screen.width, screen.height – screen size

    • screen.availWidth, screen.availHeight – available space (without taskbar)

🔹 location

  • Manages the URL of the current page.

  • Properties:

    • location.href – full URL

    • location.hostname, location.pathname, location.protocol

  • Methods:

    • location.assign(url) – change page

    • location.reload() – reloads the page

🔹 history

  • Interacts with browser history.

  • Methods:

    • history.back() – goes to the previous page

    • history.forward() – goes to the next page

    • history.go(n) – relative movement in history

🔹 console

  • Useful for debugging and development.

  • Main methods:

    • console.log(), console.warn(), console.error()

🔹 alert, prompt, confirm

  • Modal functions that interact directly with the user:

    • alert("Hello!") – displays a message

    • prompt("Enter your name:") – asks for text input

    • confirm("Are you sure?") – asks for confirmation (OK/Cancel)

🔹 setTimeout / setInterval

  • Time schedule:

    • setTimeout(fn, ms) – executes once after a delay

    • setInterval(fn, ms) – runs periodically



🌐What is the DOM?

Definition

The Document Object Model (DOM) represents the HTML content structure of the page as a collection of objects. Each HTML element becomes a node in the DOM, and JavaScript can access and modify it in real time.

What is it for

The DOM allows you to:

  • Access HTML elements (document.getElementById(), querySelector())

  • Edit contents and attributes (innerText, setAttribute)

  • Add or remove items (appendChild(), removeChild())

  • Handling user events (addEventListener())

In summary, the DOM provides a way to interact with and change the content and structure of your web page.

How to use it

Here are some practical examples:

// Changing the text of an element
document.getElementById("title").innerText = "New Title";

// Create a new paragraph and append it to the body
let p = document.createElement("p");
p.textContent = "This is a new paragraph.";
document.body.appendChild(p);

// Add an event handler to a button
document.querySelector("button").addEventListener("click", (e) => {
    alert("You clicked the button!");
});

Objects available in the DOM

Here is a clear and organized list of the main DOM (Document Object Model) objects, i.e. those that JavaScript uses to interact with the structure of the HTML page:

🔹 document

  • Main object of the DOM, represents the entire HTML page.

  • Common functions:

    • document.getElementById(id)

    • document.querySelector(cssSelector)

    • document.createElement(tagName)

    • document.body, document.head

🔹 HTMLElement (and subclasses)

  • Objects representing HTML elements (e.g. <div>, <p>, <input>).

  • Common properties:

    • element.innerHTML, element.textContent, element.value

    • element.classList, element.style, element.id

  • Methods:

    • element.setAttribute(name, value)

    • element.appendChild(node)

    • element.remove()

    • element.addEventListener(event, handler)

🔹 Node

  • Each element of the DOM is a node.

  • Types: Element, Text, Comment, Document, DocumentFragment

  • Properties:

    • node.nodeType, node.nodeName

    • node.parentNode, node.childNodes, node.firstChild

  • Methods:

    • node.appendChild(), node.removeChild()

    • node.cloneNode()

🔹 NodeList / HTMLCollection

  • Element collections:

    • NodeList from querySelectorAll(), supports .forEach()

    • HTMLCollection from getElementsByTagName(), live (updated in real time)

🔹 Event

  • Object representing an event (click, input, etc.).

  • Properties:

    • event.type, event.target, event.currentTarget

  • Methods:

    • event.preventDefault(), event.stopPropagation()

🔹 Attribute

  • Object representing an HTML attribute.

  • Rarely used directly; more often with:

    • element.getAttribute(name)

    • element.setAttribute(name, value)

🔹 Text

  • Node representing text within an element.

  • Used to read/modify text in nodes:

    • element.textContent

    • element.firstChild.nodeValue

🔹 DocumentFragment

  • A “lightweight” container for manipulating multiple nodes before inserting them into the DOM.

  • Useful for improving performance during complex updates.

Bonus: Useful APIs hooked into the DOM

  • MutationObserver – observes changes to the DOM

  • Range – represents a range of nodes

  • Selection – handles text selections


↔️ Differences between BOM and DOM

AppearanceBOMDOM
PurposeInteraction with the browserManipulating the document
AccessObjects as window, navigator, location, historyObjects like document, element, node
FunctionsWindow, popup, history, URL controlCreating and editing HTML elements
SpecificityDepends on browserStandardized by W3C
Typical usageRedirects, popups, browser infoChange content, handle events, animations

❓When to use one or the other?

  • Use the DOM when you want to interact with the page, such as displaying content, responding to user input, or dynamically changing the HTML.

  • Use the BOM when you need to interact with the browser, such as changing URLs, managing windows, or accessing data in the device.

Often, BOM and DOM work together: for example, you can use the BOM to detect a screen size (screen.width) and then use the DOM to adjust the display.


⭐ Conclusion

Knowing the difference between BOM and DOM is essential for writing effective and understandable JavaScript. The BOM connects you to the browser, the DOM connects you to the page. Both are powerful tools: knowing how to use them correctly makes the difference between a script that works and a truly dynamic user experience.



Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
Telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment