6th Jan, 2021 | 1148 Words | 8 Min Read
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 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.
<!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:
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!