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