Manipulating the DOM: Taking Control of Your Webpage ✨

Previously, we learned how to select elements in the DOM using various methods. But selecting elements is just the start. The real magic begins when you manipulate the DOM, transforming static content into dynamic and interactive experiences. 🛠️ Whether you're updating text, modifying styles, or adding new elements, DOM manipulation gives life to your webpages.

Let’s explore the different ways to manipulate DOM elements step by step! 🚀

1️⃣ Changing Content 📝

One of the most common tasks in DOM manipulation is updating the text or HTML content of elements. This is how you dynamically change the information displayed on a webpage.

Methods:
textContent: Updates only the text inside an element.
innerHTML: Updates the text and HTML structure inside an element.

// Example:
const heading = document.querySelector('h1');
heading.textContent = "Welcome to Dynamic Webpages!";
heading.innerHTML = "Welcome to JavaScript";
    

2️⃣ Changing Styles 🎨

Modify the appearance of elements directly with JavaScript by updating their style properties. This is great for creating dynamic effects like highlighting an element or changing colors.

// Example:
document.body.style.backgroundColor = "#0b1220";
document.body.style.color = "#e6eef6";
// buttons
document.querySelectorAll("button").forEach(b=>{
    b.style.backgroundColor = "#4da3ff";
    b.style.color = "#0b1220";
    b.style.border = "none";
});
// headings and pre blocks
document.querySelectorAll("h1,h2,h3").forEach(h => h.style.color = "#bfe4ff");
document.querySelectorAll("pre").forEach(p=>{
    p.style.background = "#08121a";
    p.style.color = "#d7eefc";
});
// card highlight (if exists)
document.querySelectorAll(".card").forEach(c=>{
    c.style.background = "#0f1724";
    c.style.border = "1px solid rgba(255,255,255,0.04)";
    c.style.boxShadow = "0 6px 18px rgba(0,0,0,0.6)";
});
// images border (optional)
document.querySelectorAll("img").forEach(img=>{
img.style.border = "1px solid rgba(255,255,255,0.06)";
});
    

3️⃣ Adding and Removing Elements ➕➖

JavaScript allows you to create new elements, add them to the DOM, and remove existing ones. This is especially useful for creating dynamic lists, forms, or other interactive features.

// Example:
const list = document.querySelector('ul');
const newItem = document.createElement('li');
newItem.textContent = "New Item";
list.appendChild(newItem);
list.removeChild(list.querySelector('li'));
    

4️⃣ Adding and Removing Classes 🏷️

Classes are the best way to apply styles consistently. JavaScript provides the classList property, which has methods to add, remove, and toggle classes.

// Example:
const card = document.querySelector('.card');
card.classList.add('highlight');
card.classList.remove('highlight');
card.classList.toggle('highlight');
    

5️⃣ Manipulating Attributes 🏗️

Attributes provide additional information about elements, like src for images or href for links. With JavaScript, you can dynamically set, get, or remove these attributes.

Change Image

// Example:
const image = document.querySelector('img');
image.setAttribute('src', 'https://Examplea.com/th/id/OIP');
console.log(image.getAttribute('src'));
image.removeAttribute('alt');
    

Conclusion: Building Dynamic Webpages 🌟

By combining these manipulation techniques, you can create highly dynamic and responsive websites. Here’s what you’ve learned so far:

• Change the text or structure of elements.
• Modify the appearance of elements dynamically.
• Add and remove elements for interactivity.
• Use classes for consistent and maintainable styling.
• Handle attributes to control element behavior.

The DOM is like your playground, and these tools are your building blocks to craft amazing user experiences! In the next session, we’ll explore event handling — making elements respond to user interactions like clicks or keystrokes.

Keep coding, stay curious, and never stop learning. 😊