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

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

सिंटैक्स

HTML DOM firstElementChild प्रॉपर्टी के लिए सिंटैक्स:

element.firstElementChild

उदाहरण

आइए firstElementChild प्रॉपर्टी का एक उदाहरण देखते हैं:

<!DOCTYPE html> <html> <head> 
<script> 
  function eleChild() { 
    var ch = document.getElementById("DIV1").firstElementChild.innerHTML; 
    document.getElementById("Sample").innerHTML = "div का पहला एलिमेंट चाइल्ड नोड है: " + ch; 
  } 
</script> </head> <body> 
<h1>firstElementChild प्रॉपर्टी</h1> 
<div id="DIV1"> 
  <p>यह एक p तत्व है</p> 
  <span>यह एक span तत्व है</span> 
</div> 
<button onclick="eleChild()">Get Child</button> 
<p id="Sample"></p> 
</body> </html>

आउटपुट

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

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

"Get Child" मेथड पर क्लिक करने पर:

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

उदाहरण की व्याख्या

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

हमने एक बटन "Get Child" बनाया जो यूज़र द्वारा क्लिक किए जाने पर eleChild() मेथड को एक्ज़िक्यूट करता है:

<button onclick="eleChild()">Get Child</button>

eleChild() फंक्शन id "DIV1" वाले div के firstElementChild को प्राप्त करता है और इसके innerHTML प्रॉपर्टी को वेरिएबल ch में असाइन करता है। चूंकि firstElementChild व्हाइटस्पेस को नहीं मानता, यह <p> तत्व लौटाएगा। innerHTML प्रॉपर्टी का उपयोग करके हम <p> तत्व के अंदर का टेक्स्ट प्राप्त करते हैं और इसे id "Sample" वाले पैराग्राफ में प्रदर्शित करते हैं:

function eleChild() { 
  var ch = document.getElementById("DIV1").firstElementChild.innerHTML; 
  document.getElementById("Sample").innerHTML = "div का पहला एलिमेंट चाइल्ड नोड है: " + ch; 
}