🌐 DOM Selection  Manipulation using Javascript

❓ What is DOM 
DOM means Document Object Model 
👉 It converts HTML into a tree-like structure 
👉 JavaScript uses DOM to control webpage elements 

Simple meaning 
• HTML creates elements
• DOM allows JavaScript to change them

🧠 Why DOM is important 
Without DOM 
• JavaScript cannot change UI
• No dynamic websites
• No interactive apps

Real examples 
• Form validation
• Button clicks
• Updating text dynamically
• Showing or hiding sections

🌳 DOM Tree Concept 
Browser converts HTML into nodes. 
Example structure 
• Document
• HTML
• Body
• Div
• Paragraph
• Button

JavaScript can access each node. 

🔍 Selecting Elements in DOM 
This is the most important skill. 

✅ Select by ID 
document.getElementById("title"); 

• Selects one unique element
• Fastest method

✅ Select by Class 
document.getElementsByClassName("card"); 

• Returns multiple elements
• Stored as HTML collection

✅ Select by Tag 
document.getElementsByTagName("p"); 

• Selects all tags of same type

⭐ Modern Method (Most Used) 
document.querySelector(".card"); 
• Selects first matching element
document.querySelectorAll(".card"); 
• Selects all matching elements

✏️ Manipulating Elements 
Once selected, you can change them. 

📝 Change text 
element.textContent = "New Text"; 

🧾 Change HTML 
element.innerHTML = "<b>Hello</b>"; 

🎨 Change style 
element.style.color = "red"; 

🧩 Add or remove class 
element.classList.add("active"); 
element.classList.remove("active"); 

➕ Creating New Elements 
let newDiv = document.createElement("div"); 
newDiv.textContent = "Hello DOM"; 
document.body.appendChild(newDiv); 

⚠️ Common Beginner Mistakes 
• Forgetting # for ID
• Forgetting . for class
• Using innerHTML incorrectly
• Not handling multiple elements

🧪 Mini Practice Task 
• Select a heading using ID and change text
• Select all cards using class and change background
• Add a new paragraph dynamically
• Add or remove a class using JavaScript

✅ Mini Practice Task – Solution

🟦 1️⃣ Select a heading using ID and change text 
HTML: <h1 id="title">Old Title</h1> 

JavaScript: 
const heading = document.getElementById("title"); 
heading.textContent = "New Title Changed by JS"; 
✔️ Heading text updates instantly 

🟩 2️⃣ Select all cards using class and change background 
HTML: 
<div class="card">Card 1</div> 
<div class="card">Card 2</div> 
<div class="card">Card 3</div> 

JavaScript: 
const cards = document.querySelectorAll(".card"); 
cards.forEach(card => { 
  card.style.backgroundColor = "#f2f2f2"; 
}); 
✔️ All cards get the same background 
✔️ querySelectorAll + forEach is the modern way 

➕ 3️⃣ Add a new paragraph dynamically 
JavaScript: 
const para = document.createElement("p"); 
para.textContent = "This paragraph was added using JavaScript"; 
document.body.appendChild(para); 
✔️ New paragraph appears at the bottom of the page 

🎨 4️⃣ Add or remove a class using JavaScript 
HTML: <button id="btn">Toggle</button> 

CSS: 
.active { 
  background-color: green; 
  color: white; 
} 

JavaScript: 
const btn = document.getElementById("btn"); 
btn.addEventListener("click", () => { 
  btn.classList.toggle("active"); 
}); 
✔️ Class added on click 
✔️ Removed on next click 
✔️ Clean and reusable 

➡️ Double Tap ♥️ For More