एलडब्ल्यूसी - क्वेरी चयनकर्ता ()

क्वेरी चयनकर्ता()

मूल रूप से, querySelector() का उपयोग 'this.template' के साथ किया जाता है जो किसी विशेष टेम्पलेट में मौजूद तत्वों को लाता है। यदि कई तत्व हैं, तो यह केवल पहले तत्व पर विचार करेगा। यदि निर्दिष्ट तत्व टेम्पलेट में मौजूद नहीं है तो शून्य लौटा दिया जाता है। यह चयनकर्ता को एक पैरामीटर के रूप में लेता है। यह क्लासनाम टैग हो सकता है। आईडी समर्थित नहीं होगी. कुछ मामलों में, आपकी कक्षाएं समान हैं लेकिन मान भिन्न हैं। इस परिदृश्य में, हमें डेटा-रिकिड का उपयोग करने की आवश्यकता है जो मूल्य के आधार पर तत्व प्राप्त करता है।

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

आइए देखें कि querySelector() के अंदर चयनकर्ता को कैसे निर्दिष्ट करें।

1. this.template.querySelector(चयनकर्ता)
2. this.template.querySelector('[data-recid='value']')

उदाहरण के लिए: यदि चयनकर्ता h1 टैग है, तो आपको इसे 'h1' के रूप में निर्दिष्ट करना चाहिए।

1. सभी उदाहरण इस 'meta.xml' फ़ाइल का उपयोग करते हैं। हम इसे प्रत्येक उदाहरण में निर्दिष्ट नहीं करेंगे. LWC घटकों को आपके रिकॉर्ड पेज, ऐप पेज या होम पेज पर जोड़ा जा सकता है।

2. इस गाइड में हम जिन उदाहरणों पर चर्चा करने जा रहे हैं, उनमें लॉजिक को 'जेएस' कोड के रूप में प्रदान किया गया है। उसके बाद, हम स्क्रीनशॉट निर्दिष्ट करते हैं जिसमें संपूर्ण 'जेएस' कोड शामिल है।

उदाहरण 1:

सबसे पहले, हम HTML फ़ाइल में कुछ टेक्स्ट के साथ h1, div, स्पैन और लाइटनिंग-बटन टैग बनाते हैं। इसके अलावा, हम एक बटन बनाते हैं जिस पर क्लिक करने पर पिछले तत्व मिलते हैं। 'js' फ़ाइल में, हम this.template.querySelector() के माध्यम से इन सभी चार तत्वों का आंतरिक टेक्स्ट लौटाते हैं।

पहला उदाहरण.html

पहला उदाहरण.जे.एस

संपूर्ण कोड:

आउटपुट:

इस घटक को किसी भी ऑब्जेक्ट के 'रिकॉर्ड' पृष्ठ पर जोड़ें (हमने इसे खाता रिकॉर्ड पृष्ठ पर जोड़ा है)। इस विंडो का निरीक्षण करें और 'कंसोल' टैब पर जाएं।

अब, “विवरण प्राप्त करें” बटन पर क्लिक करें। उसके बाद, आप देखेंगे कि सभी तत्वों के लिए इनरटेक्स्ट कंसोल पर प्रदर्शित होता है।

उदाहरण 2:

उदाहरण 1 में चर्चा किए गए घटक का उपयोग करें। HTML घटक में 'h1' टैग के साथ दो तत्वों को निर्दिष्ट करें और 'h1' का आंतरिक पाठ प्राप्त करने के लिए 'js' फ़ाइल में querySelector() का उपयोग करें।

पहला उदाहरण.html

पहला उदाहरण.जे.एस

संपूर्ण कोड:

आउटपुट:

एक ही टैग वाले दो तत्व हैं। इसलिए, querySelector() केवल पहले तत्व का चयन करता है। जब आप 'विवरण प्राप्त करें' बटन पर क्लिक करते हैं, तो आपको पहला 'h1' दिखाई देगा और आंतरिक टेक्स्ट कंसोल में वापस आ जाएगा।

उदाहरण 3:

हम querySelector() को एक वेरिएबल में भी स्टोर कर सकते हैं और इनरटेक्स्ट प्राप्त करने के लिए इस वेरिएबल का उपयोग कर सकते हैं। आइए कुछ टेक्स्ट के साथ एक स्पैन टैग बनाएं और इसे एक वेरिएबल में संग्रहीत करके कंसोल पर इनरटेक्स्ट लौटाएं।

पहला उदाहरण.html

पहला उदाहरण.जे.एस

संपूर्ण कोड:

आउटपुट:

उदाहरण 4:

इस उदाहरण में, हम एक बटन और इनपुट टेक्स्ट (लाइटनिंग-इनपुट) बनाते हैं जो विषय को स्ट्रिंग के रूप में लेगा। हम 'लाइटनिंग-इनपुट' को querySelector() विधि के चयनकर्ता के रूप में पास करते हैं। इसे 'कंप्यूटर_संबंधित' वेरिएबल को सौंपा गया है। इस बटन पर क्लिक करते ही इस वेरिएबल में मौजूद वैल्यू प्रदर्शित हो जाती है।

दूसरा उदाहरण.html

दूसरा उदाहरण.जे.एस

संपूर्ण कोड:

आउटपुट:

उदाहरण 5:

यहां, हम डेटा-रिकिड का उपयोग करते हैं। आइए HTML फ़ाइल में 'Span1', 'Span2' और 'Span3' जैसे तीन स्पैन टैग के साथ एक बटन बनाएं। querySelector() में डेटा-रिकिड में 'Span1' पास करके पहला स्पैन चुनें।

तीसरा उदाहरण.एचटीएमएल

तीसरा उदाहरण.जे.एस

संपूर्ण कोड:

आउटपुट:

निष्कर्ष

हमने सीखा कि DOM तत्वों तक पहुँचने के लिए querySelector() का उपयोग कैसे करें। वर्तमान टेम्पलेट में तत्वों का चयन करने के लिए querySelector() ने 'this.template' का उपयोग किया। इसे एक वेरिएबल में संग्रहीत करना या सीधे उपयोग करना संभव हो सकता है। इन दोनों का उल्लेख उदाहरण सहित किया गया है। साथ ही, हमने एक उदाहरण भी प्रदान किया है जिसमें कई तत्व शामिल हैं। इस स्थिति में, querySelector() पहला तत्व लौटाता है।