🧠 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");
});

🇮🇳 Amazon India 🌍 Amazon Global

7️⃣ DOM Manipulation (VERY IMPORTANT)