When you open a webpage in your browser, what you actually see is not just raw HTML code. Instead, your browser creates a Document Object Model (DOM) — a structured representation of the page. JavaScript uses this model to dynamically interact with, modify, and control the web page.

🌐 What is the DOM?

The DOM (Document Object Model) is a tree-like structure that represents the elements of an HTML page. Each element (like <div>, <p>, <h1>, etc.) is a node in the DOM.

📌 Think of the DOM as a bridge between HTML and JavaScript. While HTML defines the structure, JavaScript uses the DOM to read and manipulate that structure.

🖼️ DOM Tree Structure

Here’s a simple diagram of how an HTML document is represented in the DOM:

HTML
 └── HEAD
 │    └── TITLE
 │         └── "My Page"
 └── BODY
      ├── H1
      │    └── "Hello World"
      └── P
           └── "This is a paragraph."

DOM Tree Diagram

Each tag becomes a node, and nested tags form parent-child relationships.

⚙️ How JavaScript Interacts with the DOM

JavaScript can access and change DOM elements using built-in methods.

Example HTML:

<!DOCTYPE html>
<html>
  <body>
    <h1 id="title">Hello World</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

Example JavaScript:

// Select the element
const heading = document.getElementById("title");

// Change its content
heading.textContent = "DOM Manipulated by JavaScript!";

// Change its style
heading.style.color = "blue";

Result:

The text in <h1> will change to blue and say "DOM Manipulated by JavaScript!".

🔑 Key Points to Remember

The DOM represents HTML as a tree of objects.
JavaScript can select, modify, add, or remove elements from the DOM.
Changes made via JavaScript are immediately visible on the web page.
DOM manipulation is the foundation for dynamic and interactive web applications.

🚀 Conclusion

The DOM is what makes web pages interactive. Without it, HTML would remain static. By understanding how the DOM works, developers can create everything from simple text updates to complex dynamic applications like real-time dashboards, games, and modern single-page apps.

🧩 Understanding the DOM: How JavaScript Interacts with HTML