अगर तुमने कभी वेबसाइट पर किसी बटन पर क्लिक किया हो और कुछ नया दिखा हो — जैसे कोई Text बदल गया हो या कोई Image दिखाई दी हो — तो समझ लो ये सब DOM Manipulation की मदद से हुआ है।
आज हम समझेंगे कि DOM क्या होता है, और JavaScript से उसे कैसे बदला (manipulate) जा सकता है।
DOM क्या है?
DOM (Document Object Model) एक ऐसा Structure है जो हमारे HTML Document को JavaScript के लिए readable और changeable बनाता है।
मतलब — जब Browser कोई HTML पेज लोड करता है, तो वो HTML को एक Tree Structure में बदल देता है, जहाँ हर HTML Tag (जैसे <p>, <div>, <h1>) एक “Node” बन जाता है।
JavaScript इसी Tree को Access करके कुछ भी बदल सकता है — Text, Style, या Structure।
💡 DOM को Access कैसे करें?
JavaScript में DOM के elements को Access करने के लिए कुछ खास Methods होते हैं:
1. document.getElementById()
यह किसी element को उसके id के आधार पर access करता है।
let heading = document.getElementById("myHeading");
heading.style.color = "blue";
👉 अगर तुम्हारे HTML में <h1 id="myHeading">Hello World</h1> है,
तो ऊपर वाला code उसका रंग Blue कर देगा।
2. document.getElementsByClassName()
यह किसी Class के आधार पर Elements का Collection देता है।
let items = document.getElementsByClassName("list-item");
items[0].style.fontWeight = "bold";
3. document.querySelector() और document.querySelectorAll()
यह CSS Selector की तरह काम करते हैं — बहुत powerful तरीके से elements को चुनने के लिए।
let para = document.querySelector("p");
para.innerText = "यह Text JavaScript से बदला गया है!";
🧩 DOM Manipulation के Common काम
🔹 1. Text बदलना
document.getElementById("title").innerText = "नया Heading";
🔹 2. HTML बदलना
document.getElementById("container").innerHTML = "<p>New Paragraph</p>";
🔹 3. Style बदलना
document.querySelector(".box").style.backgroundColor = "yellow";
🔹 4. नया Element जोड़ना
let newDiv = document.createElement("div");
newDiv.innerText = "मैं नया Div हूँ!";
document.body.appendChild(newDiv);
🔹 5. Event Listener लगाना
let btn = document.querySelector("#clickBtn");
btn.addEventListener("click", function() {
alert("Button Clicked!");
});
⚙️ Example – Simple DOM Project
<!DOCTYPE html>
<html lang="hi">
<head>
<title>DOM Example</title>
</head>
<body>
<h1 id="heading">Hello JavaScript</h1>
<button id="changeBtn">Change Text</button>
<script>
let btn = document.getElementById("changeBtn");
btn.addEventListener("click", function() {
document.getElementById("heading").innerText = "Text बदला गया!";
});
</script>
</body>
</html>
जब तुम इस Page को चलाओगे और Button दबाओगे, तो Heading बदल जाएगी — यह है DOM Manipulation का Magic
********************
DOM Manipulation किसी भी Interactive Website की जान है।
अगर तुम JavaScript में माहिर बनना चाहते हो, तो DOM को समझना बहुत जरूरी है।
याद रखो — HTML Structure देता है, CSS Look देता है,
लेकिन JavaScript website me Life देती है!