जावास्क्रिप्ट क्वेरी चयनकर्ता
__del__ |
identity |
JavaScript |
mean |
sin |
tile
Michael Zippo
दो विधियाँ querySelector और getElementByID आपको JavaScript Object Model DOM (दस्तावेज़) से किसी तत्व को पुनः प्राप्त करने की अनुमति देती हैं। हालांकि, प्रत्येक विधि के अपने उपयोग के मामले होते हैं।
इस गाइड में, हम querySelector और getElementById के सबसे सामान्य उपयोग के मामले को देखते हैं। हम इन दो विधियों की तुलना भी करते हैं और उनमें से प्रत्येक कैसे काम करते हैं, इसका एक बुनियादी उदाहरण आपको देते हैं।
क्वेरी चयनकर्ता क्या है?
JavaScript querySelector () विधि आपको CSS चयनकर्ता का उपयोग करके DOM तत्व, या वेब पृष्ठ पुनर्प्राप्त करने की अनुमति देती है। यह विधि querySelectorAll () नामक एक सहयोगी फ़ंक्शन के साथ आती है जो किसी विशेष DOM चयनकर्ता से मेल खाने वाले सभी तत्वों का चयन करती है।
ये दो विधियां अविश्वसनीय रूप से बहुमुखी हैं। ऐसा इसलिए है क्योंकि CSS चयनकर्ता सिंटैक्स आपको वेब पेज से एक तत्व का चयन करने की अनुमति देता है।
querySelector का उपयोग करके, आपको यह करने की आवश्यकता नहीं है केवल या आईडी वर्ग के लिए आइटम चुनने की क्षमता से सीमित होने के बारे में चिंता करें, जैसे कि आप getElementById या getElementsByClassName का उपयोग करते हैं। ये विधियां विशेष रूप से उपयोगी होती हैं यदि आपके द्वारा चुने गए तत्व आपके सीएसएस स्टाइलशीट में आपके द्वारा चुने गए तत्वों के समान हैं।
आइए querySelector विधि पर एक नज़र डालते हैं। हम एक HTML तत्व लिखकर शुरू करेंगे जिसे हम बाद में जावास्क्रिप्ट में चुन सकते हैं:
हमने "अभिगम्यता" वर्ग के नाम से पाठ के एक पैराग्राफ को परिभाषित किया है। फिर हम querySelector ()
यह कोड पहले तत्व का चयन करता है जिसका वर्ग "अभिगम्यता" के बराबर है। "।" इसका मतलब है कि हम एक वर्ग का चयन करना चाहते हैं। यदि हमारे पास "एक्सेसिबिलिटी" वर्ग के साथ दो तत्व हैं, तो हम उन दोनों को पुनः प्राप्त करने के लिए querySelectorAll () का उपयोग कर सकते हैं
getElementById क्या है?
p>यह विधि क्वेरी चयनकर्ता की तुलना में अधिक प्रतिबंधात्मक है क्योंकि आप आइटम को उनकी विशेष आईडी के आधार पर पुनर्प्राप्त नहीं कर सकते हैं।
यदि आप वेब पेज से एक तत्व को पुनः प्राप्त करना चाहते हैं तो इस विकल्प का उपयोग करें। वास्तव में, HTML आईडी अद्वितीय होना चाहिए किसी विशेष तत्व के लिए। आप वेब पेज पर दो तत्वों को संदर्भित करने के लिए पहचान के कार्ड का उपयोग नहीं कर सकते।
हम getElementById चयनकर्ता का उपयोग करके एक तत्व को पुनः प्राप्त करेंगे। सबसे पहले, हम HTML कोड लिखेंगे जिससे हम एक तत्व चुनेंगे:
हम जावास्क्रिप्ट निर्देश का उपयोग उस तत्व को पुनः प्राप्त करने के लिए करते हैं जिसकी आईडी "टिप्पणियों" के बराबर है। यह <अनुभाग> तत्व है जहां हम अपने वेब पेज पर टिप्पणियां पोस्ट करते हैं।
इन दो विधियों के बीच स्पष्ट समानता यह है कि वेब पेज चुनने के दो तत्व हैं। वे इसे अलग-अलग तरीकों से करते हैं।
एक क्वेरी चयनकर्ता घोषणा के साथ, आप एक सीएसएस चयनकर्ता के आधार पर एक तत्व का चयन कर सकते हैं। इसका मतलब है कि आप आईडी, वर्ग, या किसी अन्य प्रकार के चयनकर्ता द्वारा आइटम का चयन कर सकते हैं। getElementById पद्धति का उपयोग करके, आप उसकी आईडी के आधार पर एक तत्व का चयन नहीं कर सकते।
एक सामान्य नियम के रूप में, आपको उस चयनकर्ता के लिए जाना चाहिए जो सबसे स्पष्ट रूप से कार्य करता है।
यदि आप केवल आईडी या वर्ग द्वारा एक तत्व का चयन करने की आवश्यकता है, आप क्रमशः getElementById या getElementsByClassName का उपयोग कर सकते हैं। यदि आपको आइटम चुनने के लिए अधिक विस्तृत नियम का उपयोग करने की आवश्यकता है, तो querySelector विधि सबसे अच्छा विकल्प है
दोनों querySelector और getElementById कुछ समय से JavaScript का हिस्सा रहे हैं। परिणामस्वरूप , ये विधियां दोनों आधुनिक ब्राउज़रों पर पूरी तरह से समर्थित हैं।
निष्कर्ष
क्वेरी चयनकर्ता विधि आपको CSS चयन क्वेरी का उपयोग करके किसी तत्व को पुनः प्राप्त करने की अनुमति देती है। getElementById विधि किसी तत्व को उसके DOM द्वारा पुनर्प्राप्त करती है आईडी.
दोनों विधियों में व्यापक ब्राउज़र समर्थन है। यदि आपको अधिक जटिल नियमों का उपयोग करके आइटम का चयन करने की आवश्यकता है जो सीएसएस चयनकर्ता का उपयोग करके आसानी से प्रतिनिधित्व योग्य हैं, तो आपको क्वेरी चयनकर्ता का उपयोग करना चुनना चाहिए। यदि आप इसके आधार पर एक तत्व का चयन करना चाहते हैं इसकी आईडी, getElementById का उपयोग करना एक अच्छा विकल्प है।
अब जब आपके पास यह जानने का ज्ञान है कि querySelector का उपयोग कब करना है और getElementByID मुलाकात की है एक पेशेवर की तरह!
