- Document Object Model (DOM) - This is what the browser renders as a hierarchy of nodes to be displayed to the client or the user for XML and HTML.
- Browser Object Model (BOM) - This is what allows the developers to manipulate the browser window. Using the BOM the developers can access the browser features and manipulate them outside the context of the DOM or the page that is being rendered.
Let's dive deeper to understand each of these components in detail.
The Document Object Model is a language-neutral interface for XML as well as HTML that maps out the entire document as a hierarchy of nodes creating a tree-like representation. The below-given HTML code is a perfect example of a hierarchy of nodes.
<!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
There are various methods provided by the DOM as a programming interface that lets you alter the HTML document the way you would want to as a developer. Here are a few examples of features of the DOM API:
- The ability to find an element on the web page based on its id or class.
- The ability to change the styling or the content between the tags.
- The ability to track various events on the page and to add the event listeners.
- The ability to add or remove HTML nodes.
- and so on
The DOM can be accessed using the
document object in the browser. Here is a simple example of accessing an element with
id="demo" with the help of the
<HTML> <body> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Hello World!"; </script> </body> </html>
Here is the official list of all the properties and methods of the document object in the browser.
The BOM can be accessed using the
window object which represents the browser window. All the global variables are a part of the window object in the browsers. Let's have a look at how you can access the window object and its properties:
<!DOCTYPE html> <HTML> <body> <p id="demo"></p> <script> var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; var x = document.getElementById("demo"); x.innerHTML = "Browser inner window width: " + w + ", height: " + h + "."; </script> </body> </html>
Here are a few examples of the features that are offered by the BOM API:
- Opening or closing a window.
- Moving or resizing the window.
- Getting the dimensions of the window.
- Requesting the location of the user.
- Getting the history of the browser.
- Accessing the cookies
- and so on
Here is the official list of all the properties and methods of the Browser Object Model.