What is the DOM (Document Object Model)?

What is the DOM?

The DOM (Document Object Model) is a programming interface that represents an HTML document as a structured tree of objects.

In simple words: the browser takes your HTML and converts it into a model that JavaScript can interact with.

How does the DOM work?

When a browser loads a webpage, it:

• Reads the HTML file
• Breaks it into elements
• Creates a tree structure (DOM tree)
• Allows scripts to access and modify it

Example DOM tree

Document
 └── html
     ├── head
     │    └── title
     └── body
          ├── h1
          └── p

DOM vs HTML

• HTML → the code you write
• DOM → the browser’s live representation of that code

Why is the DOM important?

The DOM is what makes modern websites interactive.

• Changing text without reloading the page
• Showing or hiding elements
• Handling user clicks and input
• Updating styles dynamically

Example of DOM manipulation

// Change text using JavaScript
document.querySelector("h1").innerText = "Hello DOM!";

Here, JavaScript selects an HTML element and changes its content in real time.

How the DOM is structured

The DOM is structured like a family tree:

• Document → root of everything
• Elements → tags like <html>, <body>
• Nodes → every part of the page (text, attributes, elements)

Summary

The DOM is a bridge between HTML and JavaScript. It turns your webpage into a structured tree that can be dynamically accessed and modified.

Without the DOM, websites would be static and non-interactive.