एक्सएमएल डोम ट्यूटोरियल
एक्सएमएल डोम
डोम क्या है?
DOM दस्तावेज़ों तक पहुँचने और उनमें हेरफेर करने के लिए एक मानक को परिभाषित करता है:
HTML DOM, HTML दस्तावेज़ों तक पहुँचने और उनमें हेरफेर करने के लिए एक मानक तरीके को परिभाषित करता है। यह एक HTML दस्तावेज़ को ट्री-स्ट्रक्चर के रूप में प्रस्तुत करता है।
एक्सएमएल डोम एक्सएमएल दस्तावेजों तक पहुंचने और हेरफेर करने के लिए एक मानक तरीका परिभाषित करता है। यह एक XML दस्तावेज़ को ट्री-स्ट्रक्चर के रूप में प्रस्तुत करता है।
HTML या XML के साथ काम करने वाले किसी भी व्यक्ति के लिए DOM को समझना जरूरी है।
एचटीएमएल डोम
सभी HTML तत्वों को HTML DOM के माध्यम से एक्सेस किया जा सकता है।
यह उदाहरण id="demo" के साथ HTML तत्व के मान को बदलता है:
उदाहरण
<h1 id="demo">This is a Heading</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
यह उदाहरण HTML दस्तावेज़ में पहले <h1> तत्व के मान को बदलता है:
उदाहरण
<h1>This is a Heading</h1>
<h1>This is a Heading</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script>
नोट: भले ही HTML दस्तावेज़ में केवल एक <h1> तत्व हो, फिर भी आपको सरणी अनुक्रमणिका [0] निर्दिष्ट करनी होगी, क्योंकि getElementsByTagName() विधि हमेशा एक सरणी लौटाती है।
आप हमारे जावास्क्रिप्ट ट्यूटोरियल में HTML DOM के बारे में बहुत कुछ जान सकते हैं ।
एक्सएमएल डोम
सभी XML तत्वों को XML DOM के माध्यम से एक्सेस किया जा सकता है।
एक्सएमएल डोम है:
- XML के लिए एक मानक ऑब्जेक्ट मॉडल
- XML के लिए एक मानक प्रोग्रामिंग इंटरफ़ेस
- प्लेटफार्म- और भाषा-स्वतंत्र
- एक W3C मानक
दूसरे शब्दों में: एक्सएमएल डोम एक्सएमएल तत्वों को प्राप्त करने, बदलने, जोड़ने या हटाने के लिए एक मानक है।
XML तत्व का मान प्राप्त करें
यह कोड किसी XML दस्तावेज़ में पहले <शीर्षक> तत्व के टेक्स्ट मान को पुनः प्राप्त करता है:
उदाहरण
txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
XML फ़ाइल लोड हो रही है
नीचे दिए गए उदाहरणों में उपयोग की गई XML फ़ाइल books.xml है ।
यह उदाहरण xmlDoc में "books.xml" पढ़ता है और Books.xml में पहले <शीर्षक> तत्व का टेक्स्ट मान पुनर्प्राप्त करता है:
उदाहरण
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
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;
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
}
</script>
</body>
</html>
उदाहरण समझाया गया
- xmlDoc - पार्सर द्वारा बनाई गई XML DOM ऑब्जेक्ट।
- getElementsByTagName ("शीर्षक") [0] - पहला <शीर्षक> तत्व प्राप्त करें
- चाइल्डनोड्स [0] - <शीर्षक> तत्व का पहला बच्चा (पाठ नोड)
- nodeValue - नोड का मान (पाठ स्वयं)
एक एक्सएमएल स्ट्रिंग लोड हो रहा है
यह उदाहरण एक टेक्स्ट स्ट्रिंग को XML DOM ऑब्जेक्ट में लोड करता है, और जावास्क्रिप्ट के साथ उससे जानकारी निकालता है:
उदाहरण
<html>
<body>
<p id="demo"></p>
<script>
var text, parser,
xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday
Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</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, XML को नोड ऑब्जेक्ट्स के सेट के रूप में मॉडल करता है। नोड्स को जावास्क्रिप्ट या अन्य प्रोग्रामिंग भाषाओं के साथ एक्सेस किया जा सकता है। इस ट्यूटोरियल में हम जावास्क्रिप्ट का उपयोग करते हैं।
डीओएम के प्रोग्रामिंग इंटरफेस को एक निर्धारित मानक गुणों और विधियों द्वारा परिभाषित किया गया है।
गुणों को अक्सर कुछ के रूप में संदर्भित किया जाता है (यानी नोडनाम "पुस्तक" है)।
विधियों को अक्सर कुछ ऐसा कहा जाता है जो किया जाता है (यानी "पुस्तक" हटाएं)।
एक्सएमएल डोम गुण
ये कुछ विशिष्ट DOM गुण हैं:
- x.nodeName - x . का नाम
- x.nodeValue - x . का मान
- x.parentNode - x . का मूल नोड
- x.childNodes - x . के चाइल्ड नोड्स
- x.attributes - x . के गुण नोड्स
नोट: उपरोक्त सूची में, x एक नोड ऑब्जेक्ट है।
एक्सएमएल डोम तरीके
- x.getElementsByTagName( name ) - एक निर्दिष्ट टैग नाम के साथ सभी तत्व प्राप्त करें
- x.appendChild( नोड ) - x . में चाइल्ड नोड डालें
- x.removeChild( नोड ) - x . से चाइल्ड नोड को हटा दें
नोट: उपरोक्त सूची में, x एक नोड ऑब्जेक्ट है।