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

HTML DOM firstChild प्रॉपर्टी का उपयोग किसी विशिष्ट नोड के पहले चाइल्ड नोड को नोड ऑब्जेक्ट के रूप में लौटाने के लिए किया जाता है। यह टेक्स्ट नोड, एलिमेंट नोड या कमेंट नोड के रूप में लौट सकता है जो इस बात पर निर्भर करता है कि कौन सा नोड पहला है। यह एक रीड-ओनली प्रॉपर्टी है।

सिंटैक्स

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

node.firstChild

उदाहरण

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

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

आउटपुट

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

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

"Get Child" बटन पर क्लिक करने पर:

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

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

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

हमने एक <div> तत्व बनाया जिसमें एक <p> और एक <span> तत्व है। div तत्व के अंदर कोई व्हाइटस्पेस नहीं है क्योंकि firstChild प्रॉपर्टी व्हाइटस्पेस को टेक्स्ट नोड मानता है और यह व्हाइटस्पेस को पहला चाइल्ड बना देगा। उस स्थिति में यह undefined लौटाएगा:

<div id="DIV1"><p>यह एक p तत्व है</p><span>यह एक span तत्व है</span></div>

फिर हमने "Get child" बटन बनाया जो यूज़र द्वारा क्लिक किए जाने पर getFirst() मेथड को एक्ज़िक्यूट करेगा:

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

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

function getFirst() { 
  var ch = document.getElementById("DIV1").firstChild.innerHTML; 
  document.getElementById("Sample").innerHTML = "div का पहला चाइल्ड नोड है: " + ch; 
}