HTML DOM चाइल्डएलिमेंटकाउंट प्रॉपर्टी

<घंटा/>

HTML DOM चाइल्डएलिमेंटकाउंट प्रॉपर्टी एक रीड-ओनली प्रॉपर्टी है जो किसी दिए गए एलिमेंट के चाइल्ड एलिमेंट की संख्या लौटाती है। चाइल्डएलिमेंटकाउंट का रिटर्न प्रकार अहस्ताक्षरित लंबा है। यह केवल उस नोड के चाइल्ड एलिमेंट को लौटाएगा जिस पर इसे पूछा गया है और HTML दस्तावेज़ के सभी चाइल्ड नोड्स नहीं।

सिंटैक्स

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

node.childElementCount

उदाहरण

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

<!DOCTYPE html>
<html>
<head>
<style>
   div {
      border: 2px solid blue;
      margin: 7px;
      padding-left:20px;
   }
</style>
</head>
<body>
<p>Click the button below to find out the no of children of the div element</p>
<button onclick="childCount()">COUNT</button>
<div id="myDIV">
<h3>HEADING</h3>
<p>First p element</p>
<p>Second p element</p>
</div>
<p id="Sample"></p>
<script>
   function childCount() {
      var x = document.getElementById("myDIV").childElementCount;
      document.getElementById("Sample").innerHTML = "The div element has "+x+" children";
   }
</script>
</body>
</html>

आउटपुट

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

HTML DOM चाइल्डएलिमेंटकाउंट प्रॉपर्टी

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

HTML DOM चाइल्डएलिमेंटकाउंट प्रॉपर्टी

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

हमने "myDIV" आईडी और उसके अंदर तीन तत्वों के साथ एक

तत्व बनाया है। दो

तत्व और एक

शीर्षलेख। हमने डिव को अन्य तत्वों से अलग करने के लिए रंगीन बॉर्डर, मार्जिन और पैडिंग को भी जोड़ा है -

div {
   border: 2px solid blue;
   margin: 7px;
   padding-left:20px;
}
<div id="myDIV">
<h3>HEADING</h3>
<p>First p element</p>
<p>Second p element</p>
</div>

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

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

चाइल्डकाउंट () विधि तत्व को "myDIV" आईडी के साथ लेती है, जो हमारे मामले में

, तत्व है और इसके चाइल्डएलिमेंटकाउंट गुण मान को चर x पर असाइन करता है। चूंकि हमारे पास

के अंदर दो

तत्व और एक

तत्व है, इसलिए चाइल्डएलिमेंटकाउंट 3 वापस आ गया है।

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

function childCount() {
   var x = document.getElementById("myDIV").childElementCount;
   document.getElementById("Sample").innerHTML = "The div element has "+x+" children";
}