जावास्क्रिप्ट एचटीएमएल डोम नेविगेशन
HTML DOM के साथ, आप नोड संबंधों का उपयोग करके नोड ट्री को नेविगेट कर सकते हैं।
डोम नोड्स
W3C HTML DOM मानक के अनुसार, HTML दस्तावेज़ में सब कुछ एक नोड है:
- संपूर्ण दस्तावेज़ एक दस्तावेज़ नोड है
- प्रत्येक HTML तत्व एक तत्व नोड है
- HTML तत्वों के अंदर का टेक्स्ट टेक्स्ट नोड्स हैं
- प्रत्येक HTML विशेषता एक विशेषता नोड है (बहिष्कृत)
- सभी टिप्पणियाँ टिप्पणी नोड हैं
HTML DOM के साथ, नोड ट्री के सभी नोड्स को जावास्क्रिप्ट द्वारा एक्सेस किया जा सकता है।
नए नोड बनाए जा सकते हैं, और सभी नोड्स को संशोधित या हटाया जा सकता है।
नोड संबंध
नोड ट्री में नोड्स का एक दूसरे से पदानुक्रमित संबंध होता है।
रिश्तों का वर्णन करने के लिए माता-पिता, बच्चे और भाई-बहन शब्द का उपयोग किया जाता है।
- एक नोड ट्री में, शीर्ष नोड को रूट (या रूट नोड) कहा जाता है
- रूट को छोड़कर प्रत्येक नोड में बिल्कुल एक माता-पिता होते हैं (जिसका कोई माता-पिता नहीं है)
- एक नोड में कई बच्चे हो सकते हैं
- भाई-बहन (भाई या बहन) एक ही माता-पिता के साथ नोड हैं
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
ऊपर दिए गए HTML से आप पढ़ सकते हैं:
<html>रूट नोड है<html>कोई माता-पिता नहीं है<html><head>and . का जनक है<body><head>की पहली संतान है<html><body>की अंतिम संतान है<html>
तथा:
<head>एक बच्चा है:<title><title>एक बच्चा है (एक टेक्स्ट नोड): "DOM Tutorial"<body>दो बच्चे हैं:<h1>और<p><h1>एक बच्चा है: "DOM पाठ एक"<p>एक बच्चा है: "नमस्ते दुनिया!"<h1>और<p>भाई बहन हैं
नोड्स के बीच नेविगेट करना
जावास्क्रिप्ट के साथ नोड्स के बीच नेविगेट करने के लिए आप निम्नलिखित नोड गुणों का उपयोग कर सकते हैं:
parentNodechildNodes[nodenumber]firstChildlastChildnextSiblingpreviousSibling
चाइल्ड नोड्स और नोड मान
डीओएम प्रसंस्करण में एक सामान्य त्रुटि तत्व नोड में टेक्स्ट होने की अपेक्षा करना है।
उदाहरण:
<title
id="demo">DOM Tutorial</title>
तत्व नोड
<title>(उपरोक्त उदाहरण में) में टेक्स्ट नहीं है।
इसमें "DOM Tutorial" मान वाला एक टेक्स्ट नोड होता है।
टेक्स्ट नोड का मान नोड की
innerHTMLसंपत्ति द्वारा पहुँचा जा सकता है:
myTitle = document.getElementById("demo").innerHTML;
आंतरिक HTML संपत्ति तक पहुँचना nodeValue
पहले बच्चे तक पहुँचने के समान है:
myTitle = document.getElementById("demo").firstChild.nodeValue;
पहले बच्चे तक पहुँच इस तरह भी की जा सकती है:
myTitle = document.getElementById("demo").childNodes[0].nodeValue;
सभी (3) निम्नलिखित उदाहरण एक तत्व के पाठ को पुनः प्राप्त करते हैं <h1>और इसे एक तत्व में कॉपी करते हैं <p>:
उदाहरण
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML
= document.getElementById("id01").innerHTML;
</script>
</body>
</html>
उदाहरण
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>
</body>
</html>
उदाहरण
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>
</body>
</html>
आंतरिक HTML
इस ट्यूटोरियल में हम HTML तत्व की सामग्री को पुनः प्राप्त करने के लिए innerHTML प्रॉपर्टी का उपयोग करते हैं।
हालाँकि, उपरोक्त अन्य विधियों को सीखना ट्री संरचना और DOM के नेविगेशन को समझने के लिए उपयोगी है।
डोम रूट नोड्स
दो विशेष गुण हैं जो पूर्ण दस्तावेज़ तक पहुँच की अनुमति देते हैं:
document.body- दस्तावेज़ का मुख्य भागdocument.documentElement- पूरा दस्तावेज़
उदाहरण
<html>
<body>
<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.body</p>
<p
id="demo"></p>
<script>
document.getElementById("demo").innerHTML
= document.body.innerHTML;
</script>
</body>
</html>
उदाहरण
<html>
<body>
<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.documentElement</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
document.documentElement.innerHTML;
</script>
</body>
</html>
नोडनाम संपत्ति
संपत्ति एक नोड का nodeNameनाम निर्दिष्ट करती है।
- नोडनाम केवल पढ़ने के लिए है
- तत्व नोड का नोडनाम टैग नाम के समान है
- एक विशेषता नोड का नोडनाम विशेषता नाम है
- टेक्स्ट नोड का नोडनाम हमेशा #text . होता है
- दस्तावेज़ नोड का नोडनाम हमेशा होता है #दस्तावेज़
उदाहरण
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML
= document.getElementById("id01").nodeName;
</script>
नोट: nodeName हमेशा एक HTML तत्व का अपरकेस टैग नाम होता है।
नोडवैल्यू संपत्ति
nodeValueसंपत्ति एक नोड के मूल्य को निर्दिष्ट करती है ।
- तत्व नोड्स के लिए नोडवैल्यू है
null - टेक्स्ट नोड्स के लिए नोडवैल्यू टेक्स्ट ही है
- नोडवैल्यू विशेषता नोड्स के लिए विशेषता मान है
नोड टाइप संपत्ति
nodeTypeसंपत्ति केवल पढ़ी जाती है । यह एक नोड का प्रकार देता है।
उदाहरण
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML
= document.getElementById("id01").nodeType;
</script>
सबसे महत्वपूर्ण नोड टाइप गुण हैं:
| Node | Type | Example |
|---|---|---|
| ELEMENT_NODE | 1 | <h1 class="heading">W3Schools</h1> |
| ATTRIBUTE_NODE | 2 | class = "heading" (deprecated) |
| TEXT_NODE | 3 | W3Schools |
| COMMENT_NODE | 8 | <!-- This is a comment --> |
| DOCUMENT_NODE | 9 | The HTML document itself (the parent of <html>) |
| DOCUMENT_TYPE_NODE | 10 | <!Doctype html> |
एचटीएमएल डोम (लेकिन काम करता है) में टाइप 2 को बहिष्कृत किया गया है। इसे एक्सएमएल डोम में बहिष्कृत नहीं किया गया है।