जावास्क्रिप्ट में, DOM ट्री नोड्स की एक बड़ी सूची वाली पदानुक्रमित संरचना का अनुसरण करता है। संरचना रूट नोड (दस्तावेज़) से शुरू होती है और फिर पैरेंट और चाइल्ड नोड्स के साथ जुड़ जाती है। इन चाइल्ड नोड्स तक पहुँचने के लिए, जावास्क्रिप्ट ' प्रदान करता है childNodes ' संपत्ति। यह प्रॉपर्टी उपयोगकर्ताओं को संबंधित मूल तत्व के सभी या विशिष्ट चाइल्ड नोड तक पहुंचने में सहायता करती है।
यह पोस्ट जावास्क्रिप्ट में HTML DOM तत्व 'चाइल्डनोड्स' प्रॉपर्टी के उद्देश्य और कार्यप्रणाली के बारे में विस्तार से बताती है।
जावास्क्रिप्ट में HTML DOM एलिमेंट 'चाइल्डनोड्स' प्रॉपर्टी क्या है?
“ childNodes ” एक केवल-पढ़ने योग्य संपत्ति है जो किसी तत्व के सभी चाइल्ड नोड्स की सूची को नोडलिस्ट ऑब्जेक्ट के रूप में लौटाती है। इस विशेष संपत्ति का उपयोग मूल तत्व के विशिष्ट चाइल्ड नोड तक पहुंचने के लिए भी किया जा सकता है। चाइल्ड नोड '0 (शून्य)' इंडेक्स से शुरू होता है। इसके अलावा, व्हाइटस्पेस, टिप्पणियाँ और टेक्स्ट नोड्स को भी चाइल्ड नोड माना जाता है।
वाक्य - विन्यास
तत्व.चाइल्डनोड्स
उपरोक्त सामान्यीकृत सिंटैक्स लक्षित तत्व के चाइल्ड नोड्स वाले नोडलिस्ट ऑब्जेक्ट को लौटाता है।
आइए उपरोक्त परिभाषित वाक्यविन्यास का व्यावहारिक रूप से उपयोग करें।
HTML कोड
सबसे पहले, बताए गए HTML कोड पर एक नज़र डालें:
< डिव पहचान = 'डिव' शैली = 'बॉर्डर: 2px ठोस काला; ऊंचाई: 200px; चौड़ाई: 250px; पैडिंग: 10px' >< एच 2 > पहला शीर्षक एच 2 >
< h3 > दूसरा शीर्षक h3 >
< पी > पहला पैराग्राफ पी >
< पी > दूसरा अनुच्छेद पी >
डिव >
< पी पहचान = 'के लिए' > पी >
उपरोक्त कोड पंक्तियों में:
- एक जोड़ना ' 'डिव' आईडी वाला तत्व, बताई गई (सीमा, ऊंचाई और चौड़ाई) गुणों की मदद से स्टाइल किया गया है।
- '
' तत्व के भीतर, क्रमशः दो शीर्षक और दो पैराग्राफ परिभाषित करें।- अंत में, ' <पी> टैग एक आईडी 'पैरा' के साथ एक खाली पैराग्राफ एम्बेड करता है।
टिप्पणी: इस पोस्ट में बताए गए HTML कोड पर विचार किया गया है।
उदाहरण 1: किसी विशेष तत्व के चाइल्ड नोड्स की कुल संख्या प्राप्त करने के लिए 'चाइल्डनोड्स' संपत्ति को लागू करना
यह उदाहरण विशिष्ट मूल तत्व में मौजूद चाइल्ड नोड्स की कुल संख्या प्राप्त करने के लिए 'चाइल्डनोड्स' और 'लंबाई' गुणों का उपयोग करता है।
जावास्क्रिप्ट कोड
आइए दिए गए कोड का पालन करें:
< लिखी हुई कहानी >
const elem = document.getElementById ( 'डिव' ) ;
होने देना संख्या = elem.childNodes.length;
document.getElementById ( 'के लिए' ) .innerHTML = 'कीमत: ' + संख्या;
लिखी हुई कहानी >कोड की उपरोक्त पंक्तियों में:
- 'एलेम' चर 'का उपयोग करता है getElementById() मूल तत्व तक पहुँचने की विधि जिसकी आईडी 'Div' है।
- 'संख्या' चर 'का उपयोग करता है childNodes ' और ' लंबाई एक्सेस किए गए '' तत्व में मौजूद चाइल्ड नोड्स की संख्या प्राप्त करने के लिए 'गुण'।
- अंत में, 'getElementById()' विधि एम्बेडेड खाली पैराग्राफ को अपनी आईडी 'पैरा' के माध्यम से 'संख्या' चर मान के साथ जोड़ने के लिए लाती है।
उत्पादन
आउटपुट का तात्पर्य है कि कुल ' 9 तत्वों के बीच रिक्त स्थान सहित दिए गए '
' तत्व में चाइल्ड नोड्स।उदाहरण 2: विशिष्ट चाइल्ड नोड का नाम प्राप्त करने के लिए 'चाइल्डनोड्स' संपत्ति को लागू करना
चाइल्ड नोड नाम प्राप्त करने के लिए 'चाइल्डनोड्स' प्रॉपर्टी का उपयोग 'नोडनेम' प्रॉपर्टी के साथ भी किया जा सकता है। आइए इसे व्यावहारिक रूप से देखें।
जावास्क्रिप्ट कोड
निम्नलिखित कोड से गुजरें:
< लिखी हुई कहानी >
const elem = document.getElementById ( 'डिव' ) ;
होने देना संख्या = elem.childNodes [ 1 ] .नोडनाम;
document.getElementById ( 'के लिए' ) .innerHTML = 'तत्व: ' + संख्या;
लिखी हुई कहानी >यहां ही ' childNodes 'संपत्ति' से जुड़ी हुई है नोडनाम एक्सेस किए गए इंडेक्स यानी, '1' के आधार पर निर्दिष्ट चाइल्ड नोड नाम प्राप्त करने के लिए संपत्ति।
उत्पादन
आउटपुट निर्दिष्ट इंडेक्स के विरुद्ध चाइल्ड नोड का नाम यानी 'H2' तत्व प्रदर्शित करता है।
उदाहरण 3: किसी विशिष्ट चाइल्ड नोड के टेक्स्ट का रंग बदलने के लिए 'चाइल्डनोड्स' प्रॉपर्टी को लागू करना
यह उदाहरण लक्ष्य अनुक्रमित बच्चे का रंग बदलने के लिए चर्चा की गई संपत्ति का उपयोग करता है।
जावास्क्रिप्ट कोड
निम्नलिखित कोड पर विचार करें:
< लिखी हुई कहानी >
document.getElementById ( 'डिव' ) .childNodes [ 3 ] .शैली.रंग= 'हरा' ;
लिखी हुई कहानी >यहां ही ' getElementById() ' विधि मूल '
' तत्व को उसकी आईडी 'Div' के माध्यम से लाती है और उसके चाइल्ड नोड को ' के माध्यम से निर्दिष्ट सूचकांक पर रखती है। childNodes 'संपत्ति, क्रमशः। उसके बाद, ' का उपयोग करें शैली.रंग एक्सेस किए गए चाइल्ड नोड के टेक्स्ट का रंग बदलने के लिए प्रॉपर्टी।उत्पादन
आउटपुट पुष्टि करता है कि निर्दिष्ट चाइल्ड नोड का टेक्स्ट रंग उचित रूप से बदल दिया गया है।
निष्कर्ष
जावास्क्रिप्ट में, ' childNodes ” संपत्ति लक्ष्य HTML तत्व के चाइल्ड नोड्स वाले नोडलिस्ट ऑब्जेक्ट को पुनः प्राप्त करती है। चाइल्ड नोड्स को 'चाइल्डनोड्स' प्रॉपर्टी के साथ इंडेक्स नंबर निर्दिष्ट करके सभी नोड्स तक एक साथ या वांछित तक पहुंचा जा सकता है। यह संपत्ति एक्सेस किए गए चाइल्ड नोड्स पर विशेष कार्य करने के लिए जावास्क्रिप्ट फ़ंक्शन के निष्पादन की अनुमति देती है। यह आलेख जावास्क्रिप्ट में 'चाइल्डनोड्स' संपत्ति को लागू करने पर विस्तार से बताया गया है।
- '