📅 Day 8: DOM Manipulation

Welcome to Day 8 of our JavaScript journey!
Today, we're exploring the power of DOM manipulation — the key to making your web pages dynamic and interactive.

🌐 What is the DOM?
The DOM (Document Object Model) is a representation of your HTML page as a tree-like structure that JavaScript can interact with. It lets you read, change, and update HTML content and styles dynamically.

🔍 Selecting Elements from the DOM
Before modifying anything, you need to select the element in JavaScript.

✅ getElementById()
Selects a single element by its ID.

<p id="greeting">Hello!</p>
const message = document.getElementById("greeting");
console.log(message.textContent); // Hello!

✅ querySelector()
Selects the first element that matches a CSS selector.

<div class="box"></div>
const box = document.querySelector(".box");

//You can also select by ID or tag:
document.querySelector("#header");
document.querySelector("h1");

✅ querySelectorAll()
Selects all elements that match a selector — returns a NodeList.

<ul>
  <li>One</li>
  <li>Two</li>
</ul>

const items = document.querySelectorAll("li");
console.log(items.length); // 2

🧱 Changing Text and Styles

const heading = document.querySelector("h1");

// Change text
heading.textContent = "Welcome to JavaScript DOM";

// Change styles
heading.style.color = "tomato";
heading.style.fontSize = "32px";

🎨 Adding & Removing Classes
One of the best ways to control styles dynamically is using classList.

✅ classList.add()
Adds a class to the element:

const box = document.querySelector(".box");
box.classList.add("active");

✅ classList.remove()
Removes a class:

box.classList.remove("active");

This way, you can toggle styles by switching classes defined in your CSS.

✅ Mini Task: Change Page Background Using Class
🎯 Task:
Create a button that, when clicked, applies a class to the

that changes its background color.
For this version, we’ll add the class manually in JS, not using event listeners.

💻 HTML:

<body class="light-theme">
  <button class="switch">Apply Dark Theme</button>
</body>

💻 CSS:

.light-theme {
  background-color: #ffffff;
}

.dark-theme {
  background-color: #121212;
  color: #f5f5f5;
}

💻 JavaScript:

// Simulate toggle manually
document.body.classList.remove("light-theme");
document.body.classList.add("dark-theme");

Try writing a conditional check next time to switch themes back and forth!

❓ Interview Questions (Day 8 Topics)

What does querySelector() return?
What is the difference between querySelector() and querySelectorAll()?
How can you change an element's text using JavaScript?
How do you apply a class to an element using JS?
Why might you prefer using classList.add() over setting element.className directly?

🏁 Day 8 Wrap-Up
In Day 9, we’ll dive deeper into Forms & Input Handling to create interactive web applications.

Keep practicing and experimenting with the DOM — it’s where frontend magic happens! 💫

☕ If you liked this content, you can support me by buying a coffee:

🧠 10-Day JavaScript Challenge: DOM Manipulation Day-8

Subscribe to my newsletter

Smriti Singh

Smriti Singh