Sun Mar 13 2022 | 1180 Words | 8 Min Read
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>
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.
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
Please spread some love by giving this article a thumbs up if you liked it, keep me motivated. You can watch this space for the next article or you can [subscribe to my Newsletter](https://cloudaffle.com/#cd-memberships) and I would notify you as soon as the next article is published. Don’t forget to leave a like or share the article if it was helpful!