Day 79: JavaScript DOM Manipulation - Making Web Pages Come Alive!

DOM (Document Object Model) is the structure of our HTML page as JavaScript sees it. With DOM manipulation, we can change content, styles, and structure dynamically using JavaScript.

✅ Accessing Elements

document.getElementbyId("title")
document.querySelector(".container");
document.querySelectorAll("p")        

✅ Changing Content

document.getElementbyId("title").textContent = "Hello, World!";        

✅ Changing Styles

document.querySelector(".box").style.backgroundColor = "lightblur";        

✅ Creating & Adding Elements

let newPara = document.createElement("p");
newPara.textContent = "This is a new paragraph!";
document.body.appendChild(newPara);        

✅ Handling Events

document.getElementById('btn").addEventListener("click",function(){
    alert("Button clicked!");
});        

With DOM manipulation, our web pages stop being static and start reacting to users – it’s where the magic begins!

#100DaysOfCode #JavaScriptDOM #DOMManipulation #WebDevelopment #FrontendDev