๐ BLOG 1: DOM Manipulation โ Make Your Website Alive! ๐


๐ 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
Subscribe to my newsletter
Read articles from Himanshu Bhagwat directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
