XML DOM ट्यूटोरियल

DOM क्या है?

DOM दस्तावेज़ को पहुंचने और ऑपरेशन करने के मानक विधियाँ निर्धारित करता है:

“W3C डॉक्यूमेंट ऑब्जैक्ट मॉडल (DOM) एक प्लेटफॉर्म और भाषा निरपेक्ष इंटरफेस है जो प्रोग्राम और स्क्रिप्ट को दस्तावेज़ के सामग्री, संरचना और शैली को डायनेमिक रूप से पहुंचने और अद्यतन करने की अनुमति देता है।”

HTML DOM HTML दस्तावेज़ को पहुंचने और ऑपरेशन करने के लिए मानक विधियाँ निर्धारित करता है। यह HTML दस्तावेज़ को ट्री संरचना के रूप में प्रस्तुत करता है।

XML DOM XML दस्तावेज़ को पहुंचने और ऑपरेशन करने के लिए मानक विधियाँ निर्धारित करता है। यह XML दस्तावेज़ को ट्री संरचना के रूप में प्रस्तुत करता है।

किसी भी व्यक्ति के लिए जो HTML या XML का उपयोग करता है, DOM को समझना आवश्यक है।

HTML DOM

सभी HTML एलीमेंट HTML DOM के माध्यम से पहुंचे जा सकते हैं।

उदाहरण 1

इस उदाहरण में id="demo" के HTML एलीमेंट का वैल्यू बदला जाता है:

<h1 id="demo">यह शीर्षक है</h1>
<p id="demo"></p>
document.getElementById("demo").innerHTML = "Hello World!";
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;

</html>

उदाहरण 2

इस उदाहरण में HTML डॉक्यूमेंट में पहले <h1> एलीमेंट का वैल्यू बदला जाता है:

<h1>यह शीर्षक है</h1>
<h1>यह शीर्षक है</h1>
<p id="demo"></p>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;

</html>

ध्यान दें:भले ही HTML डॉक्यूमेंट केवल एक <h1> एलीमेंट को शामिल करता हो, आपको फिर भी एकसाथ इंडेक्स [0] निर्दिष्ट करना होगा क्योंकि getElementsByTagName() विधि हमेशा एक आयत्ताकार लौटाती है。

आप हमारे JavaScript ट्यूटोरियल में HTML DOM के बारे में अधिक सीख सकते हैं。

एक्सएमएल डॉम

सभी XML एलीमेंट XML DOM के माध्यम से पहुँचे जा सकते हैं。

XML DOM है:

  • XML का स्टैंडर्ड ऑब्जैक्ट मॉडल
  • XML का स्टैंडर्ड प्रोग्रामिंग इंटरफेस
  • प्लेटफॉर्म और भाषा से निर्भर नहीं
  • W3C स्टैंडर्ड

अर्थात्: XML DOM, XML एलीमेंट को प्राप्त करने, बदलने, जोड़ने या हटाने के लिए कानूनी है。

XML एलीमेंट का वैल्यू प्राप्त करना

इस उदाहरण में XML डॉक्यूमेंट में पहले <title> एलीमेंट का टेक्स्ट वैल्यू खोजा जाता है:

इस उदाहरण में टेक्स्ट स्ट्रिंग को XML DOM ऑब्जेक्ट में लोड किया जाता है और JavaScript का उपयोग करके इससे जानकारी निकाली जाती है:

txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;

XML फ़ाइल लोड करना

इस उदाहरण में इस्तेमाल किए जाने वाले XML फ़ाइल है books.xml。

इस उदाहरण में "books.xml" को xmlDoc में पढ़ा जाता है और books.xml में पहले <title> एलीमेंट का टेक्स्ट वैल्यू खोजा जाता है:

इस उदाहरण में टेक्स्ट स्ट्रिंग को XML DOM ऑब्जेक्ट में लोड किया जाता है और JavaScript का उपयोग करके इससे जानकारी निकाली जाती है:

<!DOCTYPE html>
उदाहरण
<html>
<body>
<p id="demo"></p>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
    myFunction(this);
    }
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
function myFunction(xml) {
    var xmlDoc = xml.responseXML;
    xmlDoc = parser.parseFromString(text,"text/xml");
    document.getElementById("demo").innerHTML =
}
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>

</html>

}

  1. उदाहरण व्याख्या xmlDoc
  2. - विश्लेषक द्वारा बनाया गया XML DOM ऑब्जेक्ट getElementsByTagName("title")[0]
  3. - पहले <title> एलेमेंट को प्राप्त करना childNodes[0]
  4. - <title> एलेमेंट का पहला सहयोगी नोड (पाठ नोड) nodeValue

- नोड का मूल्य (पाठ स्वयं)

XML टेक्स्ट लोड करना

इस उदाहरण में टेक्स्ट स्ट्रिंग को XML DOM ऑब्जेक्ट में लोड किया जाता है और JavaScript का उपयोग करके इससे जानकारी निकाली जाती है:

उदाहरण
<html>
<body>
<p id="demo"></p>
<script>
var text, parser, xmlDoc;
text = "<bookstore><book>" +
"<title>雅舍谈吃</title>" +
"<author>梁实秋</author>" +
"<year>2013</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>

</html>

अपने आप प्रयोग करें

प्रोग्रामिंग इंटरफेस

DOM का प्रोग्रामिंग इंटरफेस एक समूह नियमित गुणों और तरीकों से परिभाषित है।

गुणआमतौर पर इसका अर्थ होता है कि क्या होता है (जैसे nodename "book" है)

तरीकेआमतौर पर इसका अर्थ होता है कि क्या कर सकता है (जैसे "book" को मिटाना इस तरह की कार्रवाई)

XML DOM गुण

ये कुछ आम DOM गुण हैं:

  • x.nodeName - x का नाम
  • x.nodeValue - x का मूल्य
  • x.parentNode - x का माता नोड
  • x.childNodes - x के सहयोगी नोड
  • x.attributes - x की गुण नोड

टिप्पणी:ऊपरी सूची में, x एक नोड ऑब्जेक्ट है।

XML DOM तरीके

  • x.getElementsByTagName(name) - नाम से नामक एलिमेंटों को प्राप्त करें
  • x.appendChild(node) - x में एक उपांग्न नोड जोड़ें
  • x.removeChild(node) - x से उपांग्न नोड हटाएं

टिप्पणी:इस लिस्ट में,x एक नोड ऑब्जेक्ट है。