DOM क्या है? – What is DOM in Hindi

by

DOM का पूरा नाम “Document Object Model” होता है। यह एक प्रोग्रामिंग इंटरफेस है जो HTML और XML documents को Tree Structure में प्रस्तुत करता है।

इस Tree Structure में हर HTML element (जैसे <div>, <p>, <h1> आदि) एक ऑब्जेक्ट की तरह होता है, जिसे हम जावास्क्रिप्ट के जरिए access और modify कर सकते हैं।

DOM का उपयोग करके हम वेब पेज के content, structure और style को dynamic तरीके से बदल सकते हैं। यह वेब डेवलपमेंट में बहुत महत्वपूर्ण है क्योंकि यह user interaction के आधार पर पेज को update करने की सुविधा देता है।

DOM का उदाहरण (Example of DOM)

मान लीजिए हमारे पास निम्न HTML कोड है:-

<!DOCTYPE html>
<html>
<head>
    <title>DOM Example</title>
</head>
<body>
    <h1 id="heading">Hello, DOM!</h1>
    <p class="text">This is a paragraph.</p>
</body>
</html>

इस HTML कोड का DOM ट्री कुछ इस तरह दिखेगा:-

document
  │
  ├── html
  │   ├── head
  │   │   └── title ("DOM Example")
  │   └── body
  │       ├── h1 ("Hello, DOM!")
  │       └── p ("This is a paragraph.")
  • HTML डॉक्यूमेंट: जब हम कोई वेब पेज बनाते हैं, तो उसका स्ट्रक्चर HTML में लिखा जाता है।
  • DOM: ब्राउज़र इस HTML को parse करके एक ट्री स्ट्रक्चर बनाता है, जिसे DOM कहते हैं।

DOM की विशेषताएं – Features of DOM in Hindi

इसकी विशेषताएं निम्नलिखित होती है:-

  1. डायनामिक वेब पेज: DOM के जरिए हम वेब पेज को डायनामिक बना सकते हैं, यानी उसे हम यूजर इंटरैक्शन के आधार पर बदल सकते हैं।

  2. Elements को एक्सेस करना: जावास्क्रिप्ट द्वारा HTML के elements को select और access किया जा सकता है, जैसे कि getElementById(), getElementsByClassName(), आदि।

  3. Elements को manipulate करना: जावास्क्रिप्ट से elements को modify किया जा सकता है, जैसे कि content बदलना, update करना, और नए elements को add करना।

  4. Event handling: DOM जावास्क्रिप्ट को events (जैसे click, hover आदि) handle करने की अनुमति देता है।

DOM के साथ काम करना (Working with DOM in Hindi)

JavaScript का उपयोग करके हम DOM को एक्सेस और मॉडिफाई कर सकते हैं। नीचे कुछ बेसिक ऑपरेशन दिए गए हैं:

1. एलिमेंट को सिलेक्ट करना (Selecting Elements)

हम किसी एलिमेंट को उसके id, class, या tag name के आधार पर सिलेक्ट कर सकते हैं।

  • getElementById: id के आधार पर एलिमेंट सिलेक्ट करना।
  • getElementsByClassName: class के आधार पर एलिमेंट्स सिलेक्ट करना।
  • getElementsByTagName: tag name के आधार पर एलिमेंट्स सिलेक्ट करना।
  • querySelector: CSS सेलेक्टर के आधार पर पहला एलिमेंट सिलेक्ट करना।
  • querySelectorAll: CSS सेलेक्टर के आधार पर सभी एलिमेंट्स सिलेक्ट करना।

उदाहरण:

let heading = document.getElementById("heading"); // id="heading" वाला एलिमेंट
let paragraphs = document.getElementsByClassName("text"); // class="text" वाले सभी एलिमेंट्स
let firstParagraph = document.querySelector("p"); // पहला <p> एलिमेंट

2. एलिमेंट को मॉडिफाई करना (Modifying Elements)

एलिमेंट को सिलेक्ट करने के बाद हम उसकी प्रॉपर्टीज को बदल सकते हैं।

  • innerHTML: एलिमेंट के अंदर का HTML कंटेंट बदलना।
  • textContent: एलिमेंट के अंदर का टेक्स्ट कंटेंट बदलना।
  • setAttribute: एलिमेंट के एट्रिब्यूट को बदलना।

उदाहरण:

heading.innerHTML = "Hello, JavaScript!"; // h1 का कंटेंट बदल गया
heading.style.color = "blue"; // h1 का रंग बदल गया
firstParagraph.setAttribute("class", "new-text"); // class को "new-text" कर दिया

3. नए एलिमेंट बनाना और जोड़ना (Creating and Adding Elements)

हम नए एलिमेंट बनाकर उन्हें DOM में जोड़ सकते हैं।

  • createElement: नया एलिमेंट बनाना।
  • appendChild: एलिमेंट को किसी अन्य एलिमेंट के अंदर जोड़ना।

उदाहरण:

let newParagraph = document.createElement("p"); // नया <p> एलिमेंट बनाया
newParagraph.textContent = "This is a new paragraph."; // इसमें टेक्स्ट डाला
document.body.appendChild(newParagraph); // इसे body में जोड़ दिया

4. इवेंट हैंडलिंग (Event Handling)

हम DOM एलिमेंट्स पर events (जैसे क्लिक, माउस ओवर, कीबोर्ड इनपुट आदि) को हैंडल कर सकते हैं।

  • addEventListener: किसी इवेंट को listen करना।

उदाहरण:

heading.addEventListener("click", function() {
    alert("Heading was clicked!");
});

इसे पढ़ें:–

dom (document object model) in Hindi

निवेदन:- इस पोस्ट को अपने दोस्तों के साथ share कीजिए और अपने questions को नीचे comment करके पूछिए।

Leave a Comment