What is the difference between DOM and BOM ?

Last Updated : 13 Mar, 2024

In this article, we will know about the Document Object Model (DOM) & Browser Object Model (BOM), along with understanding their basic implementation through the examples & the differences between them.

Document Object Model (DOM) is a programming interface for HTML and XML documents, that allows to create, manipulate, or delete the element from the document. It defines the logical structure of documents and the way a document is accessed and manipulated. With the help of DOM, the webpage can be represented in a structured hierarchy, i.e., we can easily access and manipulate tags, IDs, classes, Attributes, or Elements of HTML using commands or methods provided by the Document object, that will guide the programmers and users to understand the document in an easier manner.

HTML is used to structure the web pages and Javascript is used to add behavior to our web pages. When an HTML file is loaded into the browser, the javascript can not understand the HTML document directly. So, a corresponding document is created(DOM). DOM is basically the representation of the same HTML document but in a different format with the use of objects. DOM provides several methods to find & manipulate the behavior of the HTML element:

getElementById() Method: This method returns the elements that have given an ID which is passed to the function.
getElementsByClassName() Method: This method in Javascript returns an object containing all the elements with the specified class names in the document as objects: This
getElementsByName() Method: This method returns the collection of all elements of a particular document by name.
getElementsByTagName() Method: This method in HTML returns the collection of all the elements in the document with the given tag name.
querySelector() Method: This method in HTML is used to return the first element that matches a specified CSS selector(s) in the document.
querySelectorAll() Method: This method is used to return a collection of an element’s child elements that match a specified CSS selector(s), as a static NodeList object.

Example 1: This example uses the concept of DOM by fetching the image with a unique id with the help of the getElementById() Method.

HTML

<!DOCTYPE html> 
<html> 
  
<body style="text-align: center;"> 
    <div> 
        <h1 style="color: green;"> 
              GeeksforGeeks 
          </h1> 
        <p>Click on the button to see image</p> 
        <img id="image"> 
    </div> 
    <button type="button" 
            onclick="show()" 
            id="btnID"> 
        Show Image 
    </button> 
    
    <script> 
        function show() { 
            let image = document.getElementById("image"); 
            image.src = 
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3.png" 
            document.getElementById("btnID") 
                .style.display = "none"; 
        } 
    </script> 
</body> 
  
</html>

Output:

Browser Object Model (BOM) is a browser-specific convention referring to all the objects exposed by the web browser. The BOM allows JavaScript to “interact with” the browser. The window object represents a browser window and all its corresponding features. A window object is created automatically by the browser itself. Java Script’s window.screen object contains information about the user’s screen. It can also be written without the window prefix. This Object Model supports the following Window properties:

screen.width: The screen.width property returns the user’s screen width in pixels.
screen.height: The screen.height property returns the user’s screen height in pixels.
screen.availWidth: The screen.availWidth property returns the user’s screen width in pixels, excluding the interface features.
screen.availHeight: The screen.availHeight property returns the user’s screen height in pixels excluding the interface features.
screen.colorDepth: The screen.colorDepth property returns the bits (number) to be used to display one color.
screen.pixelDepth: The screen.pixelDepth property returns the pixel depth of the screen.

The BOM also supports the following Window methods:

window.open() Method: This method is used to open a new tab or window with the specified URL and name.
window.close() Method: This method, is used for closing a certain window or tab of the browser which was previously opened by the window.open() method.
window.moveTo() Method: This method is used in the window to move the window from the left and top coordinates.
window moveBy() Method: This method is used for moving a window with a specified number of pixels relative to its current coordinates.
window.resizeTo() Method: This method is used to resize a window to the specified width and height.

Example 2: This example uses the concepts of BOM to open & close the browser window.

HTML

<!DOCTYPE html> 
<html> 
  
<body style="display: flex;  
            flex-direction: column; 
            justify-content:center; 
            align-items:center;"> 
    <div class="container" 
         style="position: relative; 
                text-align: center;"> 
        <h1 style="color: rgb(18, 154, 18);"> 
            GeeksforGeeks 
        </h1> 
        <h3> window open and close method</h3> 
        <button onclick="windowOpen()"> 
            Open GeeksforGeeks 
        </button> 
        <button onclick="windowClose()"> 
            Close GeeksforGeeks 
        </button> 
    </div> 
    <script> 
        let Window; 
          
        // Function that open the new Window 
        function windowOpen() { 
            Window = window.open( 
                "https://www.geeksforgeeks.org/", 
                "_blank", "width=400, height=300, top=230, left=540"); 
        } 
          
        // function that Closes the open Window 
        function windowClose() { 
            Window.close(); 
        } 
    </script> 
</body> 
  
</html>

Output:

Difference between DOM & BOM:

Document Object Model (DOM)	Browser Object Model (BOM)
It mainly focuses on the structure of the displayed document.	It mainly focuses on browser-specific functionality.
It facilitates a standardized interface to access and modify the elements and content of an HTML or XML document.	It allows JavaScript to interact with browser features beyond the scope of manipulating the document structure.
When an HTML document gets loaded in the browser, then it becomes a document object.	In this case, the window object will be created automatically by the browser.
It facilitates access and manipulation, along with dynamically updating the structure, content, and styling of the web document.	It facilitates the different functionality for governing the browser window, handling the navigation, managing history, and accessing browser-related information.
It provides direct access control to the content of the web document, along with permitting the traversal and modification of its elements and attributes.	It doesn’t have any access to the content of the web document directly.