Learn DOM Manipulation in JavaScript in Hindi – Easy Guide for Beginners

by

JavaScript में DOM Manipulation वेब पेज को इंटरैक्टिव बनाने का तरीका है, जो DOM (Document Object Model) के ज़रie elements को एक्सेस और बदलाव करता है। 

यह ब्लॉग HindiStudyHub के लिए What is DOM, Structure and Access (getElementById, querySelector), Modifying (Text, Styles, Attributes), Creating/Removing Elements, Exercise (बैकग्राउंड कलर बदलना, लिस्ट आइटम जोड़ना), Quiz (5 MCQs), aur Mini Project (डायनामिक टू-डू लिस्ट) को सरल हिंदी में समझाता है। टेक्निकल टर्म्स (जैसे DOM, element, attribute) English में हैं, और कोड पूरी तरह English में है।

What is DOM in JavaScript in Hindi (JavaScript में DOM क्या होता है?)

DOM (Document Object Model) वेब पेज को tree structure में दिखाता है, जहाँ हर HTML element एक node होता है। यह JavaScript को वेब पेज के हिस्सों को चुनने और बदलने की सुविधा देता है। DOM ब्राउज़र और कोड को जोड़ता है।

Example:

console.log(document.title); // Page title

Structure and Access:

DOM की tree structure में nodes (जैसे elements, attributes, टेक्स्ट) होते हैं। getElementById और querySelector से elements चुने जाते हैं। querySelector CSS जैसे selectors को सपोर्ट करता है।

Example:

const title = document.getElementById("title");
const para = document.querySelector(".text");
console.log(title.textContent); // Title text

getElementById:

getElementById DOM में विशिष्ट ID वाले element को तेजी से ढूँढता है। यह एकल element लौटाता है और प्रदर्शन में तेज़ है।

Example:

const title = document.getElementById("title");
console.log(title.textContent); // Title text

querySelector:

querySelector DOM में CSS जैसे selectors (class, tag, ID) से element चुनता है। यह पहले मिलने वाले element को लौटाता है और लचीलापन देता है।

Example:

const para = document.querySelector(".text");
console.log(para.textContent); // Paragraph text

Modifying:

JavaScript में Modifying का मतलब होता है किसी webpage के HTML elements को JavaScript की मदद से update या change करना। 

जब हम किसी element का text, style या attribute बदलते हैं, तो हम उसे modify कर रहे होते हैं। यह process DOM के ज़रिए की जाती है। इससे static webpages को user actions के अनुसार बदलना आसान हो जाता है।

Modifying Text:

DOM में textContent से element का टेक्स्ट बदला जाता है। यह यूज़र को दिखने वाला कंटेंट अपडेट करता है।

Example:

const heading = document.querySelector("#heading");
heading.textContent = "Welcome to JavaScript";

Modifying Styles:

DOM में style प्रॉपर्टी से element की CSS स्टाइलिंग बदली जाती है। यह रंग, साइज़, या लेआउट जैसे गुण अपडेट करता है।

Example:

const box = document.querySelector(".box");
box.style.backgroundColor = "red";
box.style.fontSize = "16px";

Modifying Attributes:

DOM में setAttribute या attribute प्रॉपर्टी से element के attributes (जैसे ID, class) बदले जाते हैं।

Example:

const btn = document.querySelector("#btn");
btn.setAttribute("disabled", "true");
btn.className = "active";

Creating Elements:

DOM में createElement और appendChild से नया element बनाया और जोड़ा जाता है। यह डायनामिकली कंटेंट को वेब पेज में शामिल करता है।

Example:

const div = document.createElement("div");
div.textContent = "New Div";
document.body.appendChild(div);

Removing Elements:

DOM में remove या removeChild से element हटाया जाता है। यह वेब पेज से अनचाहे कंटेंट को हटाने में मदद करता है।

Example:

const div = document.querySelector("#myDiv");
div.remove();

Exercise: Add background color and list items on button click

Task: बटन क्लिक पर पेज का बैकग्राउंड कलर बदलें और नया लिस्ट आइटम जोड़ें।

Code:

const btn = document.getElementById("colorBtn");
const list = document.getElementById("myList");
btn.addEventListener("click", () => {
document.body.style.backgroundColor = "lightblue";
const li = document.createElement("li");
li.textContent = Item ${list.children.length + 1};
list.appendChild(li);
});

Quiz: DOM Methods

  1. What is the effect of document.getElementById("test").textContent = "Hello";?

    • A) ID “test” के element का टेक्स्ट बदलता है
    • B) नया element बनता है
    • C) Error
    • D) कुछ नहीं होता
    • Answer: A) ID “test” के element का टेक्स्ट बदलता है

  2. What is the output of document.querySelector(".box").style.color = "red";?

    • A) Class “box” का टेक्स्ट रंग लाल होता है
    • B) Class “box” हट जाती है
    • C) Error
    • D) undefined
    • Answer: A) Class “box” का टेक्स्ट रंग लाल होता है

  3. What is the output of document.getElementById("missing") if the ID does not exist?

    • A) null
    • B) undefined
    • C) Error
    • D) Empty string
    • Answer: A) null

Mini Project: डायनामिक टू-डू लिस्ट

Task: इनपुट से टास्क जोड़ने वाला टू-डू लिस्ट बनाएँ।

Code:

function createTodoList() {
const list = document.getElementById("todoList");
const input = document.getElementById("todoInput");
const addBtn = document.getElementById("addBtn");

addBtn.addEventListener("click", () => {
const task = input.value.trim();
if (task === "") {
alert("Please enter a task");
return;
}
const li = document.createElement("li");
li.textContent = task;
list.appendChild(li);
input.value = "";
});
}
createTodoList();

Conclusion

DOM Manipulation JavaScript में वेब पेज को इंटरैक्टिव बनाने का शक्तिशाली तरीका है। HindiStudyHub पर प्रैक्टिस करें और अगले मॉड्यूल में Events सीखें।

Also Read:

Leave a Comment