क्वेरी चयनकर्ता जावास्क्रिप्ट:एक गाइड

getElementById . getElementByClass . आपने इन कार्यों के बारे में पहले सुना होगा। वे दोनों आपको जावास्क्रिप्ट में एक विशेष तत्व का चयन करने की अनुमति देते हैं।

एक बार जब आप किसी तत्व का चयन कर लेते हैं, तो आप उसकी सामग्री को बदल सकते हैं, उसकी स्थिति को संशोधित कर सकते हैं, या उसे गायब भी कर सकते हैं।

जावास्क्रिप्ट में एक वेबपेज पर एक आइटम का चयन करने के लिए आप एक अन्य फ़ंक्शन का उपयोग कर सकते हैं:querySelector . इस फ़ंक्शन की एक बहन है जिसे querySelectorAll . कहा जाता है , जो किसी विशेष क्वेरी को पूरा करने वाले सभी तत्वों को लौटाता है।

इस गाइड में, हम चर्चा करने जा रहे हैं कि querySelector . का उपयोग कैसे करें और querySelectorAll तरीके। हम कार्रवाई में इन विधियों के एक उदाहरण के माध्यम से चलेंगे ताकि आप उन्हें अपने कोड में उपयोग करने के लिए तैयार हो सकें।

क्वेरी चयनकर्ता क्या है?

querySelector एक फ़ंक्शन है जो एक ऐसा तत्व देता है जो एक सीएसएस क्वेरी से मेल खाता है। querySelector पर ध्यान दें विधि केवल चयनकर्ता का पहला उदाहरण देता है। querySelector using का उपयोग करते समय , आप कोई भी CSS चयनकर्ता निर्दिष्ट कर सकते हैं जो आप चाहते हैं। उदाहरण के लिए, आप उस तत्व को पुनः प्राप्त कर सकते हैं जिसमें एक विशिष्ट आईडी सेट है, या उसके टैग नाम से एक तत्व है।

आप इस फ़ंक्शन का उपयोग इस तरह कर सकते हैं:

var elementName = document.querySelector('#thisElement');

हमने उद्धरण चिह्नों में मिलान करने के लिए CSS चयनकर्ताओं को निर्दिष्ट किया है। इसके अलावा, आप किसी अन्य तत्व के भीतर एक तत्व का चयन करने के लिए विधि का उपयोग कर सकते हैं:

var parentElement = document.querySelector('main');
var childElement = document.querySelector('#childElement');

यह तत्व को आईडी #childElement के साथ वापस कर देगा जो हमारी HTML फ़ाइल में

टैग के भीतर निहित है।

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

querySelectorAll विधि उसी तरह काम करती है। अंतर यह है कि यह केवल पहले वाले के बजाय, क्वेरी चयनकर्ता द्वारा पाए गए सभी मैचों को लौटाता है:

var allParagraphs = document.querySelectorAll('p');

यह HTML पृष्ठ पर सभी

टैग की सूची लौटाएगा।

यहां चयनकर्ताओं के कुछ उदाहरण दिए गए हैं जिनका उपयोग आप इस फ़ंक्शन के साथ कर सकते हैं:

p:पेज पर सभी
टैग का चयन करता है।
#name_field:आईडी "name_field" के साथ तत्व का चयन करता है
.सूची:वर्ग नाम "सूची" के साथ सभी तत्वों का चयन करता है
div> p:
तत्व में निहित सभी
तत्वों का चयन करता है।

आप querySelector . का उपयोग करके एकाधिक चयनकर्ताओं को निर्दिष्ट कर सकते हैं और querySelectorAll तरीके। CSS चयनकर्ताओं के बारे में अधिक जानने के लिए, CSS और HTML विशेषता चयनकर्ताओं के लिए हमारी मार्गदर्शिका देखें।

यदि मैच नहीं मिलते हैं, तो शून्य वापस आ जाता है।

क्वेरी चयनकर्ता का उपयोग कैसे करें

आइए एक सरल वेब एप्लिकेशन बनाते हैं जो यह बताता है कि querySelector . कैसे विधि काम करती है। हम एक वेब पेज बनाने जा रहे हैं जो HTML के बारे में एक तथ्य प्रदर्शित करता है। हम querySelector use का उपयोग करने जा रहे हैं एक बटन जोड़ने के लिए, जिस पर क्लिक करने पर, "डार्क मोड" सक्षम हो जाएगा।

फ्रंट एंड सेट करना

हम अपने पेज के लिए फ्रंट-एंड सेट करके शुरुआत करेंगे:

<!DOCTYPE html>
<html>
	<head>
		<title>HTML Facts!</title>
		<link rel="stylesheet" href="./facts.css">
	</head>

	<body>
		<div class="mainBox">
			<h1 class="text">HTML Facts!</h1>
			<p class="text">Did you know that HTML is actually based on another markup language, SGML, or Standard Generalized Markup Language?</p>
			<button type="button">Enable dark mode</button>
		</div>
		<script src="./facts.js"></script>
	</body>
</html>

हमने एक साधारण HTML वेबपेज बनाया है जो HTML के बारे में एक तथ्य प्रदर्शित करता है। अभी, हमारा पेज इस तरह दिखता है:

जबकि हमारा पृष्ठ हमारे उपयोगकर्ता को HTML के बारे में एक तथ्य देता है, इसमें दो प्रमुख विशेषताएं गायब हैं:शैलियाँ और एक कार्यात्मक डार्क मोड बटन। आइए फ़ैक्ट्स.css नामक फ़ाइल में निम्नलिखित शैलियों को जोड़ें:

.mainBox {
    margin: auto;
    width: 50%;
    text-align: center;
    background: hotpink;
    padding: 5%;
}

body {
    background: lightblue;
}

button {
    padding: 10px;
    background: lightgreen;
    border-radius: 10px;
    border: none;
}

ये शैलियाँ हमारी साइट को सौंदर्य की दृष्टि से अधिक आकर्षक बनाती हैं:

फ्रंट-एंड पर हमें बस इतना ही करना है। अब हम जावास्क्रिप्ट का उपयोग करके अपने डार्क मोड को जोड़ने पर ध्यान केंद्रित करने जा रहे हैं।

जावास्क्रिप्ट का उपयोग करके डार्क मोड जोड़ना

हमारे डार्क मोड फ़ंक्शन में दो विशेषताएं शामिल होनी चाहिए:

हमारे बॉक्स के अंदर के शीर्षक और पैराग्राफ को सफेद रंग में बदलना चाहिए।
हमारी साइट की नीली पृष्ठभूमि को बदलकर काला कर देना चाहिए।

आइए उन DOM तत्वों (वेबपेज तत्वों) का चयन करके शुरू करें जिन्हें हम लक्षित करना चाहते हैं:शीर्षक, अनुच्छेद और हमारे पृष्ठ का मुख्य भाग। हम इसे fact.js नामक फ़ाइल में करने जा रहे हैं:

const heading = document.querySelector("h1");
const paragraph = document.querySelector("p");
const body = document.querySelector("body");

यह कोड दस्तावेज़ में पहला तत्व लौटाता है जिसमें टैग

, और अब हम एक ऐसा फ़ंक्शन बनाने जा रहे हैं जो हमारे टेक्स्ट और बॉडी टैग के रंग को बदल देता है। हम अपने शीर्षक और पैराग्राफ टेक्स्ट को सफेद और अपनी साइट की पृष्ठभूमि को काले रंग में बदल देंगे।

function enableDarkMode() {
	heading.setAttribute("style", "color: white;");
	paragraph.setAttribute("style", "color: white;");
	body.setAttribute("style", "background-color: black;");
}

हम बस पहुँच गए। अगला कदम एक ईवेंट श्रोता स्थापित करना है। जब भी कोई उपयोगकर्ता हमारे बटन पर क्लिक करेगा तो यह श्रोता सुनेगा। जब उपयोगकर्ता बटन पर क्लिक करता है, तो डार्क मोड सक्षम हो जाएगा:

document.querySelector("button").addEventListener("click", enableDarkMode);

अब, देखते हैं कि जब हम अपने बटन पर क्लिक करते हैं तो क्या होता है:

हमारी साइट सफलतापूर्वक एक डार्क मोड में बदल गई है।

निष्कर्ष (और चुनौती)

आप देखेंगे कि हमारा कोड केवल एक उपयोगकर्ता को डार्क मोड को सक्षम करने की अनुमति देता है। क्या दिया? यह आपके लिए एक चुनौती प्रस्तुत करता है:वह कोड लिखें जो उपयोगकर्ता को साइट पर डार्क मोड को अक्षम करने की अनुमति देगा।

querySelector विधि आपको CSS चयनकर्ता क्वेरी के आधार पर HTML तत्वों का चयन करने की अनुमति देती है। यह विधि किसी मैच का पहला उदाहरण लौटाती है। आप querySelectorAll . का उपयोग कर सकते हैं निर्दिष्ट चयनकर्ता से मेल खाने वाले सभी तत्वों की सूची प्राप्त करने की विधि

अब आप querySelector . का इस्तेमाल शुरू करने के लिए तैयार हैं जावास्क्रिप्ट समर्थक की तरह विधि!