HTML DOM firstChild प्रॉपर्टी का उपयोग किसी विशिष्ट नोड के पहले चाइल्ड नोड को नोड ऑब्जेक्ट के रूप में वापस करने के लिए किया जाता है। यह एक टेक्स्ट नोड, एलिमेंट नोड या एक टिप्पणी नोड के रूप में वापस आ सकता है, जिसके आधार पर कौन सा नोड पहला है। यह केवल पढ़ने के लिए संपत्ति है।
सिंटैक्स
HTML DOM firstChild प्रॉपर्टी का सिंटैक्स निम्नलिखित है -
node.firstChild
उदाहरण
आइए पहले चाइल्ड प्रॉपर्टी के लिए एक उदाहरण देखें -
<!DOCTYPE html>
<html>
<head>
<script>
function getFirst() {
var ch = document.getElementById("DIV1").firstChild.innerHTML;
document.getElementById("Sample").innerHTML = "The first child node of the div is :"+ch;
}
</script>
</head>
<body>
<h1>firstChild property</h1>
<div id="DIV1"><p>This is a p element</p><span>This is a span element</span></div>
<button onclick="getFirst()">Get Child</button>
<p id="Sample"></p>
</body>
</html> आउटपुट
यह निम्नलिखित आउटपुट देगा -
"बाल प्राप्त करें" बटन पर क्लिक करने पर -
हमने एक
और एक तत्व है। Div एलिमेंट के अंदर कोई खाली जगह नहीं है क्योंकि फर्स्ट चाइल्ड प्रॉपर्टी व्हाइटस्पेस को टेक्स्ट नोड मानती है और यह व्हाइटस्पेस को पहला बच्चा बना देगी। उस स्थिति में यह अपरिभाषित लौटेगा।
<div id="DIV1"><p>This is a p element</p><span>This is a span element</span></div>
हमने तब "गेट चाइल्ड" बटन बनाया है जो उपयोगकर्ता द्वारा क्लिक किए जाने पर गेटफर्स्ट () विधि को निष्पादित करेगा -
<button onclick="getFirst()">Get Child</button>
गेटफर्स्ट () विधि को डिव एलिमेंट का पहला चाइल्ड फर्स्ट चाइल्ड प्रॉपर्टी का उपयोग करके मिलता है जो हमारे मामले में
एलिमेंट लौटाएगा। फिर हम आंतरिक HTML प्रॉपर्टी का उपयोग करके p तत्व के अंदर टेक्स्ट प्राप्त करते हैं और उस मान को वेरिएबल ch को असाइन करते हैं। यह मान तब पैराग्राफ में "नमूना" आईडी के साथ आंतरिक HTML संपत्ति का उपयोग करके इच्छित पाठ निर्दिष्ट करके प्रदर्शित किया जाता है -
function getFirst() {
var ch = document.getElementById("DIV1").firstChild.innerHTML;
document.getElementById("Sample").innerHTML = "The first child node of the div is :"+list;
}