HTML DOM childElementCount प्रॉपर्टी

HTML DOM childElementCount प्रॉपर्टी एक रीड-ओनली प्रॉपर्टी है जो किसी दिए गए एलिमेंट के चाइल्ड एलिमेंट्स की संख्या वापस करती है। childElementCount का रिटर्न टाइप अनसाइन्ड लॉन्ग (unsigned long) होता है। यह केवल उस नोड के चाइल्ड एलिमेंट्स को वापस करेगा जिस पर यह क्वेरी की गई है, न कि पूरे HTML डॉक्यूमेंट के सभी चाइल्ड नोड्स को।

सिंटैक्स (Syntax)

childElementCount प्रॉपर्टी का सिंटैक्स:

node.childElementCount

उदाहरण (Example)

HTML DOM childElementCount प्रॉपर्टी का एक उदाहरण:

<!DOCTYPE html> <html> <head> <style> div { border: 2px solid blue; margin: 7px; padding-left: 20px; } </style> </head> <body> <p>div एलिमेंट के चिल्ड्रन की संख्या जानने के लिए नीचे दिए गए बटन पर क्लिक करें</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>

आउटपुट (Output)

इससे निम्नलिखित आउटपुट प्राप्त होगा:

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

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

हमने "myDIV" आईडी वाला एक <div> एलिमेंट बनाया है जिसके अंदर तीन एलिमेंट्स हैं: दो <p> एलिमेंट्स और एक <h3> हेडर। हमने डिव को अन्य एलिमेंट्स से अलग दिखाने के लिए कलर्ड बॉर्डर, मार्जिन और पैडिंग जोड़ा है:

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 बटन बनाया जो क्लिक होने पर childCount() मेथड को एक्जीक्यूट करता है:

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

childCount() मेथड "myDIV" आईडी वाले एलिमेंट (जो हमारे केस में <div> है) को लेता है और उसके childElementCount प्रॉपर्टी वैल्यू को वेरिएबल x में असाइन करता है। चूंकि <div> के अंदर दो <p> एलिमेंट्स और एक <h3> एलिमेंट है, इसलिए childElementCount 3 वापस करता है।

रिटर्न वैल्यू को फिर "Sample" आईडी वाले पैराग्राफ में innerHTML प्रॉपर्टी का उपयोग करके प्रदर्शित किया जाता है:

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