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 DOM can be accessed using the
object in the browser. Here is a simple example of accessing an element with
" with the help of the
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:
Here is the official list of all the properties and methods of the Browser Object Model.