JavaScript DOM Manipulation (JS-09)

Track: JavaScript Basics
Lesson: JS-09 / JS-10

🎯 Lesson Goal

By the end of this lesson, you will be able to select HTML elements using JavaScript, change their content and styles, and handle user events such as clicks and form inputs to create interactive web pages.

---

📌 Prerequisites

• JS-01: Variables and Data Types
• JS-02: Operators and Expressions
• JS-03: Conditional Statements
• JS-04: Loops
• JS-05: Functions
• JS-06: Arrays
• JS-07: Objects
• JS-08: Array Methods

You should understand:

• Functions
• Objects
• Basic HTML structure

---

📘 What is the DOM?

DOM stands for Document Object Model.

It represents an HTML page as a tree of objects, which JavaScript can:

• Read
• Modify
• Add to
• Remove from

👉 DOM is the bridge between HTML and JavaScript.

---

🔹 Selecting HTML Elements

1️⃣ getElementById()

Selects an element using its id.

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

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

---

2️⃣ querySelector() (Most Used)

Selects the first matching element.

let para = document.querySelector("p");
let box = document.querySelector(".container");

---

3️⃣ querySelectorAll()

Selects all matching elements.

let items = document.querySelectorAll("li");
console.log(items);

---

🔹 Changing Content

innerText

heading.innerText = "JavaScript DOM Manipulation";

innerHTML

heading.innerHTML = "<span>DOM Updated</span>";

⚠️ Use innerHTML carefully (security reasons).

---

🔹 Changing Styles

heading.style.color = "blue";
heading.style.fontSize = "30px";

Best Practice: Add/Remove CSS Classes

heading.classList.add("highlight");
heading.classList.remove("highlight");

---

🔹 Handling Events (Very Important)

Events allow JavaScript to react to user actions.

Click Event

<button id="btn">Click Me</button>

let button = document.getElementById("btn");

button.addEventListener("click", function () {
  alert("Button clicked!");
});

---

🔹 Changing Content on Click

<p id="message">Hello</p>
<button id="changeBtn">Change Text</button>

document.getElementById("changeBtn").addEventListener("click", function () {
  document.getElementById("message").innerText = "Text Changed!";
});

---

🔹 Input Handling (Forms)

<input type="text" id="username">
<button id="showBtn">Show Name</button>

document.getElementById("showBtn").addEventListener("click", function () {
  let name = document.getElementById("username").value;
  alert("Hello " + name);
});

---

🔹 Simple Form Validation

<input type="text" id="email">
<button id="submitBtn">Submit</button>
<p id="error"></p>

document.getElementById("submitBtn").addEventListener("click", function () {
  let email = document.getElementById("email").value;

  if (email === "") {
    document.getElementById("error").innerText = "Email is required";
  } else {
    document.getElementById("error").innerText = "";
    alert("Form submitted");
  }
});

---

🔹 Creating Elements Dynamically

let newPara = document.createElement("p");
newPara.innerText = "This is a new paragraph";

document.body.appendChild(newPara);

---

🔹 Removing Elements

newPara.remove();

---

🔹 Real-World Mini Example (To-Do Style)

<input type="text" id="task">
<button id="addTask">Add</button>
<ul id="list"></ul>

document.getElementById("addTask").addEventListener("click", function () {
  let taskText = document.getElementById("task").value;

  let li = document.createElement("li");
  li.innerText = taskText;

  document.getElementById("list").appendChild(li);
});

👉 This is the foundation of real projects.

---

⚠️ Common Mistakes

• Selecting elements before page loads
• Using wrong selectors
• Forgetting event listeners
• Mixing HTML and JS logic poorly

---

🧠 Practice Tasks

1. Change heading text on button click
2. Toggle a CSS class on click
3. Validate a form field
4. Add list items dynamically
5. Remove an element on click

---

🧪 Mini Coding Challenge

Create a simple theme switcher:

• Button toggles background between light and dark
• Text color updates accordingly

(Hint: use classList.toggle())

---

📝 Summary

• DOM connects JavaScript with HTML
• Elements can be selected and modified
• Events make pages interactive
• Forms and inputs are handled via DOM
• DOM skills are essential before React

---

➡️ Next Lesson

JavaScript Mini Project (JS-10)
(Build a small interactive project using everything learned)

---

🏅 Quiz & Badge

Quiz and badges will be enabled soon.