HTML DOM चाइल्डनोड्स प्रॉपर्टी

<घंटा/>

HTML DOM चाइल्डनोड्स प्रॉपर्टी नोड के चाइल्ड नोड्स का एक संग्रह NodeList ऑब्जेक्ट के रूप में लौटाती है। नोड्स सॉर्ट किए जाते हैं और उसी क्रम में होते हैं जैसे वे HTML दस्तावेज़ में दिखाई देते हैं। इन नोड्स को इंडेक्स नंबर द्वारा एक्सेस किया जा सकता है जो 0 से शुरू होता है। यह केवल-पढ़ने के लिए संपत्ति है। याद रखें, सफेद स्थान और टिप्पणियों को भी नोड माना जाता है।

सिंटैक्स

चाइल्डनोड्स प्रॉपर्टी का सिंटैक्स निम्नलिखित है -

elementNodeReference.childNodes;

उदाहरण

आइए HTML DOM चाइल्डनोड्स प्रॉपर्टी के लिए एक उदाहरण देखें -

<!DOCTYPE html>
<html>
<head>
<style>
   div {
      border: 1px solid blue;
      margin: 7px;
   }
</style>
</head>
<body>
<p>Click the button below to find the div element childnodes.</p>
<button onclick="countNodes()">COUNT</button>
<div id="DIV1">
<p>First p element </p>
<p>Second p element</p>
</div>
<p id="Sample"></p>
<script>
   function countNodes() {
      var x = document.getElementById("DIV1").childNodes.length;
      document.getElementById("Sample").innerHTML = "The div element has "+x+" child nodes";
   }
</script>
</body>
</html>

आउटपुट

यह निम्नलिखित आउटपुट देगा -

HTML DOM चाइल्डनोड्स प्रॉपर्टी

COUNT बटन क्लिक करने पर -

HTML DOM चाइल्डनोड्स प्रॉपर्टी

उपरोक्त उदाहरण में -

हमने "DIV1" आईडी के साथ एक

तत्व बनाया है और इसके अंदर दो पैराग्राफ हैं। हमने इसे अन्य तत्वों से अलग करने के लिए एक रंग सीमा और कुछ मार्जिन जोड़ा है। यहां महत्वपूर्ण बात यह है कि प्रत्येक तत्व को अपनी लाइन पर लाने के लिए तीन एंटर की को दबाया जाता है जो आउट

टैग में कुल तीन व्हाइटस्पेस बनाता है।

div {
   border: 1px solid blue;
   margin: 7px;
}
<div id="DIV1">
<p>First p element </p>
<p>Second p element</p>
</div>

हमने तब एक बटन COUNT बनाया है जो उपयोगकर्ता द्वारा क्लिक किए जाने पर काउंटनोड्स () विधि को निष्पादित करेगा।

<button onclick="countNodes()">COUNT</button>

countNodes() फ़ंक्शन को वह तत्व मिलता है जिसकी आईडी "DIV1" के बराबर होती है, जो हमारे मामले में

तत्व है और इसके चाइल्डनोड्स.लेंथ प्रॉपर्टी मान प्राप्त करता है और इसे वेरिएबल x को असाइन करता है।

चूंकि

चिल्डनोड्स टैग के अंदर तीन व्हाइटस्पेस और दो

तत्व हैं। लंबाई वापसी 5. लौटाया गया मान फिर आंतरिक HTML() विधि का उपयोग करके आईडी "नमूना" के साथ अनुच्छेद में प्रदर्शित होता है।

function countNodes() {
   var x = document.getElementById("DIV1").childNodes.length;
   document.getElementById("Sample").innerHTML = "The div element has "+x+" child nodes";
}