DEV Community

S Sarumathi
S Sarumathi

Posted on

What Is DOM?

#webdev #beginners #html #javascript

When a webpage loads, the browser doesn’t directly show the HTML file.Instead, it reads the HTML and creates a live, structured version of the page called the DOM — Document Object Model.

  • HTML is the plan

  • DOM is the actual page the browser builds from that plan

The DOM looks like a tree structure, where every HTML tag becomes a part of that tree.

Example:

Css
<body>
  <h1>Hello</h1>
  <p>Welcome to my website</p>
</body>
Enter fullscreen mode Exit fullscreen mode 
Document
 └── body
      ├── h1
      └── p
Enter fullscreen mode Exit fullscreen mode

Each item (h1, p, body) becomes a node in the DOM.

Top comments (0)