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