जावास्क्रिप्ट हार्ड डॉम नेविगेशन
- पिछला पृष्ठ डॉम इवेंट लिस्टनर
- अगला पृष्ठ डॉम नोड
HTML DOM के माध्यम से, आप नोड संबंधों के द्वारा नोड ट्री का निर्देशन कर सकते हैं।
डॉम नोड
W3C HTML DOM मानक के अनुसार, HTML दस्तावेज़ में सभी चीज़ें नोड हैं:
- समूचा दस्तावेज़ एक दस्तावेज़ नोड है
- हर HTML एलीमेंट एक एलीमेंट नोड है
- HTML एलीमेंट के अंदर का टेक्स्ट टेक्स्ट नोड है
- हर HTML गुण एक गुण नोड है
- सभी टिप्पणी टिप्पणी नोड हैं
HTML DOM के साथ, नोड ट्री में सभी नोडों को JavaScript के द्वारा पहुँचा जा सकता है।
नए नोड को बनाने के साथ-साथ, सभी नोडों को संपादित और मिटाया जा सकता है।
नोड संबंध
नोड ट्री में, नोडों के बीच कुछ स्तरीय संबंध हैं।
- शब्द (पिता, बच्चा और साथी, parent, child और sibling) इन संबंधों के वर्णन के लिए उपयोग किया जाता है।
- नोड ट्री में, शीर्ष नोड को मूल कहा जाता है (मूल नोड को मूल नोड कहते हैं)।
- हर नोड का एक पिता नोड है, अगर तो मूल (मूल नोड का पिता नोड नहीं है)।
- नोड को कुछ संख्या के बच्चों को रख सकते हैं
- साथी (भाई या बहन) एक है जो एक ही पिता के पास हैं नोड
<html>
<head>
<title>DOM ट्यूटोरियल</title>
</head>
<body>
<h1>DOM पहला लेक्चर</h1>
<p>Hello world!</p>
</body>
</html>
ऊपर के HTML से आप नीचे की सूचना पढ़ सकते हैं:
- html एक है मूल नोड
- html का कोई पिता नहीं है
- html एक है head और body का माता
- head एक है html का पहला सबद
- <body> <html> का अंतिम बच्चा है
साथ ही:
- <head> का एक बच्चा है: <title>
- <title> का एक बच्चा (टेक्स्ट नोड): "DOM ट्यूटोरियल"
- <body> के दो बच्चे हैं: <h1> और <p>
- <h1> का एक बच्चा है: "DOM पहला लेक्चर"
- <p> का एक बच्चा है: "Hello world!"
- <h1> और <p> साथी हैं
नोडों के बीच निर्देशन
जावास्क्रिप्ट के द्वारा आप नोडों के बीच निर्देशन के लिए नीचे दिए गए नोड गुण का उपयोग कर सकते हैं:
- parentNode
- childNodes[nodenumber]
- firstChild
- lastChild
- nextSibling
- previousSibling
चयनित आईटीम और नोड के मान
DOM प्रशासन में एक आम गलती यह है कि एलिमेंट नोड में टेक्स्ट शामिल है।
उदाहरण:
<title id="demo">DOM ट्यूटोरियल</title>
（उपरी उदाहरण में）एलिमेंट नोड <title> इसमें शामिल नहीं हैटेक्स्ट
यह टेक्स्ट के रूप में "DOM ट्यूटोरियल" का मान रखता हैटेक्स्ट नोड。
टेक्स्ट नोड के माध्यम से टेक्स्ट नोड का मान देख सकते हैं innerHTML गुण को देखें
var myTitle = document.getElementById("demo").innerHTML;
innerHTML गुण को देखने के बजाय पहले चयनित आईटीम को देखें nodeValue：
var myTitle = document.getElementById("demo").firstChild.nodeValue;
इस तरह से भी पहले चयनित आईटीम को देख सकते हैं:
var myTitle = document.getElementById("demo").childNodes[0].nodeValue;
नीचे दिए तीन उदाहरणों में <h1> एलिमेंट का टेक्स्ट और उसे कॉपी करें <p> एलिमेंट में：
उदाहरण 1
<html>
<body>
<h1 id="id01">मेरा पहला पृष्ठ</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").innerHTML;
</script>
</body>
</html>
उदाहरण 2
<html>
<body>
<h1 id="id01">मेरा पहला पृष्ठ</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>
</body>
</html>
उदाहरण 3
<html>
<body>
<h1 id="id01">मेरा पहला पृष्ठ</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>
</body>
</html>
InnerHTML
इस ट्यूटोरियल में हम इसे इस्तेमाल करते हैं innerHTML HTML एलिमेंट की सामग्री को ले लेता है。
हालांकि, उपरोक्त अन्य विधियों का अध्ययन करना DOM के ट्री संरचना और नौवहन को समझने में मदद करता है。
DOM मूल नोड
दो विशेष पैरामीटर पूर्ण डॉक्यूमेंट की पहुँच की अनुमति देते हैं:
- document.body - डॉक्यूमेंट का body
- document.documentElement - पूर्ण डॉक्यूमेंट
उदाहरण
<html> <body> <p>Hello World!</p> <div> <p>DOM काफी उपयोगी है!</p> <p>इस उदाहरण में <b>document.body</b> पैरामीटर को दिखाया गया है。</p> </div> <script> alert(document.body.innerHTML); </script> </body> </html>
उदाहरण
<html> <body> <p>Hello World!</p> <div> <p>DOM काफी उपयोगी है!</p> <p>इस उदाहरण में <b>document.documentElement</b> पैरामीटर को दिखाया गया है。</p> </div> <script> alert(document.documentElement.innerHTML); </script> </body> </html>
nodeName पैरामीटर
nodeName पैरामीटर नोड का नाम निर्धारित करता है
- nodeName सिर्फ पढ़ने ही वाला है
- एलिमेंट नोड का nodeName टैग नाम के समान है
- पैरामीटर नोड का nodeName पैरामीटर नाम है
- पाठ नोड का nodeName हमेशा #text है
- डॉक्यूमेंट नोड का nodeName हमेशा #document है
उदाहरण
<h1 id="id01">मेरा पहला वेब पेज</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>
टिप्पणी：nodeName हमेशा HTML एलिमेंट के बड़े मेटा नाम को शामिल करता है
nodeValue पैरामीटर
nodeValue पैरामीटर नोड का मान निर्धारित करता है
- एलिमेंट नोड का nodeValue undefined है
- पाठ नोड का nodeValue पाठ को वापस करता है
- पैरामीटर नोड का nodeValue पैरामीटर मान को वापस करता है
nodeType पैरामीटर
nodeType पैरामीटर नोड के प्रकार को वापस करता है。nodeType सिर्फ पढ़ने ही वाला है।
उदाहरण
<h1 id="id01">मेरा पहला वेब पेज</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>
सबसे महत्वपूर्ण nodeType गुण है:
| नोड | किस्म | उदाहरण |
|---|---|---|
| ELEMENT_NODE | 1 | <h1 class="heading">W3School</h1> |
| ATTRIBUTE_NODE | 2 | class = "heading" (अब प्रयोग में नहीं लगाया जाता) |
| TEXT_NODE | 3 | W3School |
| COMMENT_NODE | 8 | <!-- यह टिप्पणी है --> |
| DOCUMENT_NODE | 9 | एचटीएमएल दस्तावेज़ कोशिश (html के पैर) |
| DOCUMENT_TYPE_NODE | 10 | <!Doctype html> |
टाइप 2 एचटीएमएल डॉम में अब नहीं प्रयोग में लगाया जाता है।एक्सएमएल डॉम में अब नहीं प्रयोग में लगाया जाता है।
- पिछला पृष्ठ डॉम इवेंट लिस्टनर
- अगला पृष्ठ डॉम नोड
