DEV Community

Cover image for 🧠 10-Day JavaScript Challenge: DOM Manipulation Day-8
Smriti Singh
Smriti Singh

Posted on

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

#dom #javascript #learnjavascript #webdev

📅 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!
Enter fullscreen mode Exit fullscreen mode

✅ 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");
Enter fullscreen mode Exit fullscreen mode

✅ 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
Enter fullscreen mode Exit fullscreen mode

🧱 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";
Enter fullscreen mode Exit fullscreen mode

🎨 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");
Enter fullscreen mode Exit fullscreen mode

✅ classList.remove()
Removes a class:

box.classList.remove("active");
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

💻 CSS:

.light-theme { background-color: #ffffff; } .dark-theme { background-color: #121212; color: #f5f5f5; }
Enter fullscreen mode Exit fullscreen mode

💻 JavaScript:

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

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

❓ Interview Questions (Day 8 Topics)

  1. What does querySelector() return?
  2. What is the difference between querySelector() and querySelectorAll()?
  3. How can you change an element's text using JavaScript?
  4. How do you apply a class to an element using JS?
  5. 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:

Buy Me A Coffee

Top comments (0)