1. What is the DOM?

<h1 id="title">Hello</h1>

<script>
  document.getElementById("title").innerText 
      = "New Title";
</script>

What is this?

The **Document Object Model (DOM)** is a tree structure created by the browser. It allows JavaScript to "reach in" and modify text, HTML, and CSS dynamically.

2. getElementById()

<h1 id="title">Hello</h1>

<script>
  // Syntax
  document.getElementById("id")

  // Action
  document.getElementById("title")
          .style.color = "red";
</script>

What is this?

This is the fastest way to select a **unique** element. Since IDs must be unique on a page, JS knows exactly which element to target and change its style or content.

3. querySelector()

<p class="info">Paragraph</p>

<script>
  // Syntax
  document.querySelector("selector")

  // Action
  document.querySelector(".info")
          .style.color = "blue";
</script>

What is this?

The modern, flexible way to select elements. You use the **exact same selectors** you learned in CSS (like .class, #id, or tagname).