HTML DOM पेरेंटएलिमेंट प्रॉपर्टी का उपयोग करके पेरेंट एलिमेंट तक कैसे पहुंचें

Html Dom Perenta Elimenta Proparti Ka Upayoga Karake Perenta Elimenta Taka Kaise Pahuncem



जावास्क्रिप्ट का उपयोग करके दस्तावेज़ ऑब्जेक्ट मॉडल (डीओएम) में कई कार्यात्मकताओं को जोड़ते समय, डेवलपर को अक्सर तत्व के जुड़ाव का विश्लेषण करने की आवश्यकता होती है। इसे लक्ष्य तत्व के मूल तत्व को लॉग करके प्राप्त किया जा सकता है जो कोड प्रवाह और साइट में शामिल सुविधाओं के स्वरूपण को सुव्यवस्थित करता है।

सामग्री अवलोकन

जावास्क्रिप्ट में 'पैरेंटएलिमेंट' संपत्ति क्या है?

“ अभिभावकतत्व जावास्क्रिप्ट में संपत्ति उस तत्व को पुनः प्राप्त करती है जो लक्ष्य तत्व का जनक है।

HTML DOM पेरेंटएलिमेंट प्रॉपर्टी के माध्यम से पेरेंट एलिमेंट तक कैसे पहुंचें/आह्वान करें?

मूल तत्व को HTML DOM का उपयोग करके एक्सेस किया जा सकता है ” अभिभावकतत्व 'संपत्ति के साथ' नोडनाम 'संपत्ति या इसके बजाय मूल तत्व के नोड को पुनः प्राप्त करना' पेरेंटनोड ' संपत्ति।





वाक्य - विन्यास



नोड. अभिभावकतत्व

प्रतिलाभ की मात्रा
यह गुण एक तत्व ऑब्जेक्ट को पुनः प्राप्त करता है जो नोड के मूल तत्व नोड का प्रतिनिधित्व करता है और देता है ' व्यर्थ 'यदि नोड में माता-पिता शामिल नहीं है।



सामान्य तरीकों और गुणों का उपयोग किया गया

दस्तावेज़.querySelector() : यह विधि सीएसएस चयनकर्ता से मेल खाने वाला पहला तत्व प्राप्त करती है।



वाक्य - विन्यास

दस्तावेज़। क्वेरी चयनकर्ता ( यह )

इस वाक्यविन्यास में, ' यह ” एक या अधिक सीएसएस चयनकर्ताओं को संदर्भित करता है।



दस्तावेज़.getElementById() : यह निर्दिष्ट आईडी वाला तत्व लौटाता है।

वाक्य - विन्यास

दस्तावेज़। getElementById ( पहचान )

यहाँ, ' पहचान 'प्राप्त किए जाने वाले लक्ष्य तत्व की आईडी को इंगित करता है।

चयनित सूचकांक : यह प्रॉपर्टी ड्रॉप-डाउन सूची से चयनित विकल्प के सूचकांक को पुनः प्राप्त करती है। '-1' विकल्प सभी विकल्पों को अचयनित करता है।

नोडनाम : यह संपत्ति नोड का नाम पुनः प्राप्त करती है।

बच्चे : यह गुण तत्व के चाइल्ड तत्वों को संग्रह के रूप में लौटाता है।

बाहरीHTML : यह संपत्ति HTML तत्व के साथ-साथ इसकी विशेषताओं और प्रारंभ और अंत टैग को आवंटित या पुनर्प्राप्त करती है।

पेरेंटनोड : यह विशेष गुण किसी तत्व या नोड के मूल नोड को लाता है।

टिप्पणी : 'के बीच का अंतर अभिभावकतत्व ' और ' पेरेंटनोड 'संपत्ति वह है जो पूर्व संपत्ति यानी, 'parentElement' देती है व्यर्थ 'यदि मूल नोड किसी तत्व नोड को प्रतिबिंबित नहीं करता है।

उदाहरण 1: जावास्क्रिप्ट में 'parentElement' प्रॉपर्टी के माध्यम से मूल तत्व तक पहुँचना

यह उदाहरण किसी तत्व के मूल तत्व को आमंत्रित करता है और बटन क्लिक पर उसका (मूल) नोड नाम प्रदर्शित करता है।

HTML कोड


< एचटीएमएल >
< शरीर >
< एच 1 > जावास्क्रिप्ट में पेरेंटएलिमेंट प्रॉपर्टी < / एच 1 >
< एच 2 > भाषा का चयन करें: < / एच 2 >
< चुनना कक्षा = 'तत्व' >
< विकल्प > अजगर < / विकल्प >
< विकल्प > जावा < / विकल्प >
< विकल्प > जावास्क्रिप्ट < / विकल्प >
< / चुनना >
< बटन क्लिक पर = 'डिस्प्लेपेरेंट()' कक्षा = 'बटन' > 'विकल्प' तत्व का मूल तत्व प्रदर्शित करें < / बटन >
< डिव कक्षा = 'अस्थायी' < / डिव < / शरीर >
< एचटीएमएल >

इस कोड में:

  • दिए गए को निर्दिष्ट करें “

    ” और “

    ” वे तत्व जिनमें क्रमशः स्तर-एक और स्तर-दो शीर्षक शामिल हैं।

  • उसके बाद, एक बनाएं “<चयन>” दिए गए वर्ग द्वारा दर्शाया गया तत्व जिसमें आगे के बाल तत्व शामिल हैं, अर्थात, '<विकल्प>' .
  • अब, 'से संबद्ध एक बटन बनाएं क्लिक पर ” वह घटना जो पुनर्निर्देशित करती है 'डिस्प्लेपेरेंट()' बटन क्लिक पर कार्य करें।
  • अंत में, निर्दिष्ट करें “
    ” वह तत्व जिसमें परिणाम यानी, एक्सेस किए गए मूल तत्व को प्रदर्शित किया जाना है।

सीएसएस कोड

<शैली >
शरीर {
पाठ संरेखित : केंद्र ;
रंग : #fff ;
पृष्ठभूमि का रंग : स्लेटी ;
ऊंचाई : 100% ;
}
।बटन {
ऊंचाई : 2रेम ;
बॉर्डर-त्रिज्या : 2px ;
चौड़ाई : 35% ;
अंतर : 2रेम ऑटो ;
प्रदर्शन : अवरोध पैदा करना ;
रंग : #ba0b0b ;
कर्सर : सूचक ;
}
.अस्थायी {
फ़ॉन्ट आकार : 1.5रेम ;
फ़ॉन्ट वजन : बोल्ड ;
}
>

उपरोक्त सीएसएस कोड में:

  • लागू किए गए 'टेक्स्ट-एलाइन', 'बैकग्राउंड-कलर' आदि गुणों के साथ समग्र वेब पेज को स्टाइल करें।
  • इसी तरह, बनाए गए बटन की ऊंचाई, चौड़ाई, डिस्प्ले, रंग आदि को समायोजित करके स्टाइल को उसके वर्ग के माध्यम से लागू करें।
  • अंत में, 'स्टाइल करें' डिव 'इसके वर्ग नाम का संदर्भ देकर जिसमें एक्सेस किए गए मूल तत्व को प्रदर्शित किया जाना है।

जावास्क्रिप्ट कोड



< लिखी हुई कहानी >
समारोह प्रदर्शन अभिभावक ( ) {
था पाना = दस्तावेज़। क्वेरी चयनकर्ता ( '।तत्व' ) ;
था यह = पाना . विकल्प [ पाना . चयनित सूचकांक ] ;
था संलग्न = दस्तावेज़। क्वेरी चयनकर्ता ( '.अस्थायी' ) ;
संलग्न करें. आंतरिक HTML = 'विकल्प तत्व का मूल तत्व है ->' + यह। अभिभावकतत्व . नोडनाम ;
}
लिखी हुई कहानी >

इन कोड पंक्तियों के अनुसार:

  • फ़ंक्शन को परिभाषित करें 'डिस्प्लेपेरेंट()' जो '