📒 BLOG 1: DOM Manipulation – Make Your Website Alive! 🌟
Himanshu Bhagwat2 min read
📌 What is DOM?
DOM stands for Document Object Model.
It represents your HTML page as a tree of objects 🌳
JavaScript can use this tree to change content, style, and structure of your webpage.
This process is called DOM Manipulation 💡
🎯 Why DOM Manipulation is Important?
With DOM manipulation, you can:
📝 Change text
🎨 Change styles like color and size
➕ Add new elements
❌ Remove elements
🖱️ React when users click or type
<h1 id="mainTitle">Hello!</h1>
<button onclick="changeText()">Click Me</button>
function changeText() {
document.getElementById("mainTitle").innerText = "You clicked the button! 🎉";
}
🧠 This will change the heading text when the button is clicked.
📚 Common DOM Methods
| Method | Use |
getElementById() | Select element using ID 🆔 |
getElementsByClassName() | Select multiple elements by class 📚 |
querySelector() | Select using CSS selector 🔍 |
innerText | Change text only 📝 |
innerHTML | Add or change HTML 📦 |
style | Change CSS styles 🎨 |
createElement() | Create new element ✨ |
appendChild() | Add element to page ➕ |
remove() | Remove element ❌ |
🧠 Tips for Beginners
Always check if the element exists before changing it 🙈
Try using
console.log()to see what you are selecting 🖥️
🖋️ Written by Himanshu Bhagwat
📘 Learning through Devsync
0
Subscribe to my newsletter
Read articles from Himanshu Bhagwat directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by