DOM क्या है? (What is DOM?)
DOM (Document Object Model) एक प्रोग्रामिंग इंटरफ़ेस है जो वेब दस्तावेज़ों को संरचित करता है। यह दस्तावेज़ की संरचना को एक ट्री के रूप में प्रदर्शित करता है, जिसमें प्रत्येक नोड दस्तावेज़ के एक हिस्से का प्रतिनिधित्व करता है। DOM आपको जावा स्क्रिप्ट का उपयोग करके HTML और XML दस्तावेज़ों को संशोधित करने, हटाने, और जोड़ने की अनुमति देता है।
<!DOCTYPE html> <html> <head> <title>DOM Example</title> </head> <body> <h1>Hello, World!</h1> <p>This is an example of DOM.</p> </body> </html>
DOM की संरचना (Structure of DOM)
DOM की संरचना एक ट्री के रूप में होती है, जिसमें प्रत्येक नोड एक डॉक्यूमेंट का एक हिस्सा होता है। सबसे ऊपरी नोड document होता है, जो पूरे HTML डॉक्यूमेंट को दर्शाता है। इसके नीचे, विभिन्न प्रकार के नोड होते हैं, जैसे एलिमेंट नोड, टेक्स्ट नोड, एट्रिब्यूट नोड, आदि।
उदाहरण:
document– पूरी HTML डॉक्यूमेंटhtml– HTML एलिमेंटhead– हेड एलिमेंटbody– बॉडी एलिमेंटh1– हेडिंग 1 एलिमेंटp– पैराग्राफ एलिमेंट
ब्राउज़र में DOM कैसे काम करता है? (How DOM Works in Browser?)
जब ब्राउज़र एक वेब पेज को लोड करता है, तो वह HTML डॉक्यूमेंट को पार्स करता है और एक DOM ट्री बनाता है। यह DOM ट्री जावा स्क्रिप्ट का उपयोग करके संशोधित किया जा सकता है। ब्राउज़र हर बार जब भी DOM में कोई परिवर्तन होता है, पेज को अपडेट करता है।
उदाहरण:
<!DOCTYPE html>
<html>
<head>
<title>DOM Working Example</title>
</head>
<body>
<h1 id="heading">Hello, World!</h1>
<p id="paragraph">This is an example of DOM working in a browser.</p>
<script>
// Accessing DOM elements
let heading = document.getElementById("heading");
let paragraph = document.getElementById("paragraph");
// Modifying DOM elements
heading.innerHTML = "Welcome to DOM!";
paragraph.innerHTML = "This content has been modified using JavaScript.";
</script>
</body>
</html>
DOM और HTML के बीच संबंध (Relation between DOM and HTML)
HTML एक मार्कअप लैंग्वेज है जिसका उपयोग वेब पेज की संरचना बनाने के लिए किया जाता है। जब HTML को ब्राउज़र में लोड किया जाता है, तो इसे DOM में बदल दिया जाता है। DOM एक प्रोग्रामिंग इंटरफ़ेस है जो HTML डॉक्यूमेंट को जावा स्क्रिप्ट का उपयोग करके एक्सेस और मैनिपुलेट करने की अनुमति देता है। HTML और DOM के बीच का संबंध यह है कि HTML एक स्टैटिक डॉक्यूमेंट है जबकि DOM एक लाइव संरचना है जिसे प्रोग्रामेटिकली संशोधित किया जा सकता है।
उदाहरण:
<!DOCTYPE html>
<html>
<head>
<title>DOM and HTML Example</title>
</head>
<body>
<h1 id="title">Original Title</h1>
<button onclick="changeTitle()">Change Title</button>
<script>
function changeTitle() {
document.getElementById("title").innerHTML = "Modified Title";
}
</script>
</body>
</html>
