13_document_object_model

🌐 The Document Object Model (DOM)

The Document Object Model (DOM) is a powerful structure that allows JavaScript to interact with and modify web pages in real time. Whether it's adding elements, changing styles, or handling user interactions, the DOM is what makes the web come alive! 🌟

---

🧩 What is the DOM?

The DOM is a tree-like structure that represents the elements in an HTML document. Every part of your web page (headings, paragraphs, images, etc.) is a node in this tree, and JavaScript can access, modify, or delete these nodes.

🔍 Example: HTML Structure to DOM Tree

HTML Example:

<h1>Welcome to My Website</h1>
<p>This is a paragraph.</p>

DOM Tree:

• Document
  • html
    • head
    • body
      • h1 ("Welcome to My Website")
      • p ("This is a paragraph")

This structured representation allows JavaScript to interact with each part of the page, making changes that instantly appear in the browser.

---

⚙️ How JavaScript Interacts with the DOM

JavaScript can read or change any element in the DOM, and any changes made are instantly reflected on the web page, making the DOM live.

🛠️ Example: Changing Text on the Page

<h1 id="heading">Welcome!</h1>
<button onclick="changeText()">Change Text</button>

<script>
  function changeText() {
    document.getElementById("heading").textContent = "Hello, World!";
  }
</script>

📝 Explanation:

• document.getElementById(): This method selects an element by its ID (heading).
• textContent: This property changes the text inside the element.
• Result: When the button is clicked, the text inside the <h1> changes from "Welcome!" to "Hello, World!".

---

🔄 The DOM is Live!

The DOM is dynamic and live, meaning any changes made through JavaScript are immediately visible on the web page.

➕ Example: Adding a New Element

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
<button onclick="addItem()">Add Item</button>

<script>
  function addItem() {
    const list = document.getElementById("list");
    const newItem = document.createElement("li");
    newItem.textContent = "New Item";
    list.appendChild(newItem);
  }
</script>

📝 Explanation:

• document.createElement(): This creates a new HTML element (<li>).
• appendChild(): This method adds the new element to the list.
• Result: When the button is clicked, a new item is added to the list dynamically.