HTML DOM children प्रॉपर्टी का उपयोग किसी निर्दिष्ट एलिमेंट के सभी चाइल्ड एलिमेंट्स को HTMLCollection के रूप में वापस करने के लिए किया जाता है। यह केवल एक रीड-ओनली (read-only) प्रॉपर्टी है। प्राप्त एलिमेंट्स को इंडेक्स नंबर्स का उपयोग करके एक्सेस किया जा सकता है, जो 0 से शुरू होते हैं।
एलिमेंट्स उसी क्रम में दिखाई देते हैं जैसे वे HTML डॉक्यूमेंट में होते हैं। इसमें केवल चाइल्ड नोड्स होते हैं और childNodes प्रॉपर्टी की तरह व्हाइटस्पेस और कमेंट्स शामिल नहीं होते।
सिंटैक्स (Syntax)
children प्रॉपर्टी का सिंटैक्स निम्नलिखित है:
element.children
आइए HTML DOM children प्रॉपर्टी का एक उदाहरण देखते हैं:
<!DOCTYPE html> <html> <head> <style> div { border: 1px solid blue; margin: 7px; } </style> </head> <body> <p>div एलिमेंट के चाइल्ड्स की संख्या जानने के लिए नीचे दिए गए बटन पर क्लिक करें</p> <button onclick="myChild()">COUNT</button> <div id="DIV1"> <p>First p element</p> <p>Second p element</p> </div> <p id="Sample"></p> <script> function myChild() { var x = document.getElementById("DIV1").children.length; document.getElementById("Sample").innerHTML = "The div element has " + x + " child nodes"; } </script> </body> </html>आउटपुट (Output)
इससे निम्नलिखित आउटपुट प्राप्त होगा:
COUNT बटन पर क्लिक करने पर:
उपरोक्त उदाहरण में:
हमने "DIV1" आईडी वाला एक <div> एलिमेंट बनाया है जिसके अंदर दो पैराग्राफ हैं। इसे अन्य एलिमेंट्स से अलग दिखाने के लिए हमने कलर्ड बॉर्डर और मार्जिन जोड़ा है:
div { border: 1px solid blue; margin: 7px; } <div id="DIV1"> <p>First p element</p> <p>Second p element</p> </div>फिर हमने एक COUNT बटन बनाया जो यूजर द्वारा क्लिक किए जाने पर myChild() फंक्शन को एक्जीक्यूट करता है:
<button onclick="myChild()">COUNT</button>
myChild() फंक्शन "DIV1" आईडी वाले एलिमेंट को प्राप्त करता है (जो हमारे केस में <div> एलिमेंट है) और उसके children.length प्रॉपर्टी वैल्यू को वेरिएबल x में असाइन करता है। महत्वपूर्ण बात यह है कि children प्रॉपर्टी व्हाइटस्पेस और कमेंट्स को नहीं मानती, इसलिए यह केवल दो <p> एलिमेंट्स को मानेगी और children.length 2 वापस करेगा। यह वैल्यू फिर "Sample" आईडी वाले पैराग्राफ में innerHTML प्रॉपर्टी का उपयोग करके प्रदर्शित की जाती है:
function myChild() { var x = document.getElementById("DIV1").children.length; document.getElementById("Sample").innerHTML = "The div element has " + x + " child nodes"; }
