Introduction

The DOM represents a document as a tree. The tree is made up of parent-child relationships, a parent can have one or many child nodes.
When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM is a standard for getting, changing, adding, or deleting HTML elements.
Consider the following HTML:
  1. <html>
  2. <head>
  3. <title>Good Morning</title>
  4. </head>
  5. <body>
  6. Hello
  7. </body>
  8. </html>
The DOM will look like:
DOM1
At the top level, there is an HTML node, with two children: head and body, among which only the head tag has a child tag, title.
The idea of the DOM is that every node is an object. We can get a node and change its properties.
Example
  1. <html>
  2. <head>
  3. <title>ABHIJEET</title>
  4. </head>
  5. <body>
  6. <div>HELLO</div>
  7. <ul>
  8. <li>WOW</li>
  9. <li></li>
  10. </ul>
  11. <div>GREAT</div>
  12. </body>
  13. </html>
And here is the DOM if we represent it as a tree.
DOM2
Properties
Using the Document Object Model (DOM):