🧠 What is DOM?

DOM = Document Object Model

👉 When a webpage loads, the browser converts HTML into a tree structure (objects).

Example HTML:

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

DOM representation:

Document
 └── h1 (id="title")
       └── "Hello"

👉 JavaScript can access and modify this structure.

---

🎯 Selecting Elements

To change anything on a page, first you must select it.

---

🔹 getElementById

let element = document.getElementById("title");
console.log(element);

👉 Selects element by ID
👉 Returns single element

---

🔹 getElementsByClassName

let items = document.getElementsByClassName("box");
console.log(items);

👉 Selects elements by class
👉 Returns HTMLCollection (array-like)

---

🔹 querySelector

let element = document.querySelector(".box");

👉 Selects first matching element
👉 Uses CSS selectors

---

🔹 querySelectorAll

let elements = document.querySelectorAll(".box");

👉 Selects all matching elements
👉 Returns NodeList

---

✏️ Changing HTML

🔹 innerHTML

document.getElementById("title").innerHTML = "Welcome Aditya!";

👉 Changes content inside element

---

🔹 textContent

element.textContent = "New Text";

👉 Safer than innerHTML (no HTML tags executed)

---

🎨 Changing CSS

🔹 style property

element.style.color = "red";
element.style.backgroundColor = "yellow";

---

🔹 Add / Remove Class

element.classList.add("active");
element.classList.remove("active");
element.classList.toggle("dark");

👉 Best practice for styling

---

⚡ Event Handling

👉 Events = user actions

Examples:

• click
• hover
• submit
• keypress

---

🔹 onclick

<button onclick="changeText()">Click</button>

function changeText() {
  document.getElementById("title").innerHTML = "Clicked!";
}

---

🔹 onmouseover

<div onmouseover="hoverEffect()">Hover me</div>

function hoverEffect() {
  console.log("Mouse over");
}

---

🔹 onsubmit

<form onsubmit="return validateForm()">
  <input type="text" id="name">
  <button type="submit">Submit</button>
</form>

function validateForm() {
  let name = document.getElementById("name").value;  if (name === "") {
    alert("Name required");
    return false;
  }
}

👉 return false stops form submission

---

🚀 Practice Projects

These are must-do to master DOM 👇

---

🌙 1. Dark Mode Toggle

<button onclick="toggleDark()">Dark Mode</button>

function toggleDark() {
  document.body.classList.toggle("dark");
}

.dark {
  background: black;
  color: white;
}

---

🖼️ 2. Image Slider

<img id="slider" src="img1.jpg" width="300">
<button onclick="next()">Next</button>

let images = ["img1.jpg", "img2.jpg", "img3.jpg"];
let index = 0;function next() {
  index = (index + 1) % images.length;
  document.getElementById("slider").src = images[index];
}

---

📋 3. Form Validation

function validateForm() {
  let email = document.getElementById("email").value;  if (email === "") {
    alert("Email required");
    return false;
  }  if (!email.includes("@")) {
    alert("Invalid email");
    return false;
  }
}

---

🧠 Pro Tips

• Prefer querySelector (modern)
• Use classList instead of style
• Avoid too much innerHTML
• Use addEventListener (advanced)

Example:

button.addEventListener("click", function() {
  console.log("Clicked");
});