JavaScript के getElementById गेटर का उपयोग कैसे करें

तो, आप JavaScript में वेब पेज पर एक तत्व का चयन करना चाहते हैं? यह getElementById मेथड की विशेषता है, जिसे JavaScript में तत्व getters का तथाकथित राजा कहा जाता है।

getElementById आपको उसके ID के आधार पर एक तत्व का चयन करने की अनुमति देता है। जब आप इसके बारे में सोचते हैं तो यह एक काफी आत्म-व्याख्यात्मक मेथड नाम है।

इस गाइड में, हम बात करने जा रहे हैं कि getElementById क्या है, यह कैसे काम करता है, और आपको अपने कोड में इसका उपयोग कब करना चाहिए। हम अपने document.getElementById डेमो में "Show/hide" टेक्स्ट बटन का एक उदाहरण देखेंगे।

आइए गोता लगाएँ!

getElementById क्या है?

getElementById() एक Document मेथड है जो आपके द्वारा निर्दिष्ट एलिमेंट ID एट्रिब्यूट के आधार पर पेज पर HTML DOM से एक तत्व का चयन करता है।

निम्नलिखित कोड पर विचार करें:

index.html
<button id="mainButton">This is a button!</button>

scripts.js
const button = document.getElementById("mainButton");

हमारे HTML कोड में, हमने एक <button> एलिमेंट परिभाषित किया है जिसका ID mainButton है। हमारा JavaScript कोड getElementById() मेथड का उपयोग करके इस घटक को पुनर्प्राप्त करेगा।

यह मेथड उपयोगी है यदि आप पेज पर एक सिंगल एलिमेंट पुनर्प्राप्त करना चाहते हैं। यदि आप HTML और CSS सीखने के बारे में सोचते हैं, तो आप जानते होंगे कि IDs यूनिक होने चाहिए। यह getElementById() को सिंगल एलिमेंट्स पुनर्प्राप्त करने के लिए परफेक्ट बनाता है।

आप इस मेथड का उपयोग करना चुन सकते हैं यदि आपने किसी एलिमेंट को ID असाइन किया है। एक व्यापक getter जैसे querySelector या getElementByClass का उपयोग करने के बजाय, जो किसी विशेष मानदंड को पूरा करने वाला पहला एलिमेंट ऑब्जेक्ट लौटाता है, आप getElementById() का उपयोग करके एलिमेंट को पुनर्प्राप्त कर सकते हैं।

getElementById() वेब पेज पर आइटम पुनर्प्राप्त करने के लिए उपयोग की जाने वाली एक सामान्य मेथड है।

getElementById के बारे में आपको क्या जानना चाहिए

इससे पहले कि हम एक उदाहरण में जाएं, हम उन गलतियों के बारे में बात करने जा रहे हैं जो शुरुआती अक्सर इस मेथड का उपयोग करते समय करते हैं।

जब आप कुछ नया सीख रहे होते हैं और यह काम नहीं करता तो यह हमेशा निराशाजनक होता है, तो आइए चर्चा करते हैं कि getElementById() का उपयोग करते समय आप कौन सी सामान्य त्रुटियाँ कर सकते हैं।

पहला, getElementById() केस सेंसिटिव है। जबकि प्रोग्रामिंग में ID शब्द आमतौर पर कैपिटलाइज़्ड होता है, जब आप इस मेथड का उपयोग कर रहे होते हैं तो आपको कैमल केस Id का उपयोग करने की आवश्यकता होती है। अन्यथा, यह मेथड काम नहीं करेगा।

दूसरा, आपके द्वारा निर्दिष्ट ID में पाउंड साइन (हैशटैग) शामिल नहीं होना चाहिए। इस कोड पर विचार करें:

const button = document.getElementById("#mainButton");

यह उदाहरण ऐसा लग सकता है कि यह mainButton ID वाले एलिमेंट को पुनर्प्राप्त करेगा, लेकिन ऐसा नहीं है। आपको केवल उस एलिमेंट का ID निर्दिष्ट करना चाहिए जिसे आप पुनर्प्राप्त करना चाहते हैं:

const button = document.getElementById("mainButton");

अब यह रास्ते से हट गया, हम एक उदाहरण के माध्यम से जा सकते हैं।

getElementById का उपयोग कैसे करें

जब आप वेब ब्राउज़ कर रहे होते हैं, तो आप "Read more" कहने वाले टैग्स का सामना कर सकते हैं। एक वेब पेज टेक्स्ट के कुछ वाक्य दिखा सकता है, और फिर आपसे उस बटन को दबाने के लिए कह सकता है ताकि आप बाकी टेक्स्ट देख सकें।

हम getElementById() गेटर का उपयोग करके उस सुविधा को बनाने जा रहे हैं। आप इस ट्यूटोरियल के लिए अंतिम कोड GitHub पर देख सकते हैं।

फ्रंट-एंड बनाना

आइए HTML और CSS का उपयोग करके एक सरल फ्रंट-एंड बनाकर शुरू करें। index.html नामक एक नई फ़ाइल बनाएं और निम्नलिखित कोड पेस्ट करें:

<!DOCTYPE html>
<html>
<head>
    <title>getElementById() का परिचय</title>
    <link rel="stylesheet" href="styles.css" />
</head>
<body>
    <div>
        <h1>JavaScript getElementById()</h1>
        <p>क्या आप getElementById() के बारे में अधिक जानना चाहते हैं? आप सही जगह पर आए हैं।</p>
        <span id="showMore">Read more</span>
        <p id="hiddenText">getElementById() एक JavaScript मेथड है जो आपको वेब पेज पर एक एलिमेंट का चयन करने की अनुमति देता है। इस मेथड को आमतौर पर "getter" कहा जाता है क्योंकि यह पेज से एक एलिमेंट "gets" करता है।</p>
    </div>
</body>
<script src="scripts.js"></script>
</html>

इस दस्तावेज़ में, हमने getElementById() मेथड के बारे में जानकारी वाला एक बॉक्स परिभाषित किया है। हमारे बॉक्स में एक शीर्षक, टेक्स्ट के दो पैराग्राफ, और एक स्पैन HTML टैग है जिसका उपयोग हम अंतिम पैराग्राफ को प्रकट करने के लिए करेंगे।

styles.css नामक एक फ़ाइल खोलें और यह कोड पेस्ट करें:

body {
    font-family: Arial, sans-serif;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}
#hiddenText {
    display: none;
}
#showMore {
    color: blue;
    cursor: pointer;
    text-decoration: underline;
}

यह कोड हमारे पेज को अधिक आकर्षक बनाने के लिए कुछ रंग देता है। जब आप वेब पेज खोलते हैं, तो आप निम्नलिखित देखेंगे:

(यहाँ स्क्रीनशॉट होगा)

एक समस्या है: हमारा "Read more" टैग कुछ नहीं करता, और हमारा अंतिम पैराग्राफ अभी भी दिखाई दे रहा है। ऐसा इसलिए है क्योंकि हमने अभी तक अपना JavaScript कोड नहीं जोड़ा है। आइए अपने वेब पेज के लिए JavaScript कार्यक्षमता लिखें।

JavaScript कोड जोड़ना

आइए उन एलिमेंट्स का चयन करके शुरू करें जिनके साथ हम काम करने जा रहे हैं। जिन एलिमेंट्स का हमें चयन करने की आवश्यकता है वे हैं हमारा <span> टैग (जिसमें हमारा "Read more" टेक्स्ट है), और वह पैराग्राफ जिसे हम दिखाने और छिपाने के बीच टॉगल करना चाहते हैं।

scripts.js नामक फ़ाइल बनाएं और यह कोड पेस्ट करें:

var paragraph = document.getElementById("hiddenText");
paragraph.style.display = "none";

हमारे कोड में, हमने DOM दस्तावेज़ से अपने पैराग्राफ को पुनर्प्राप्त करने के लिए getElementById() का उपयोग किया है। hiddenText दस्तावेज़ ऑब्जेक्ट का चयन करता है और इसे छुपाता है। अगला, हम एक फंक्शन बनाएंगे जो हमारे टेक्स्ट को टॉगल करता है:

function toggleText() {
    if (paragraph.style.display === "none") {
        paragraph.style.display = "block";
    } else {
        paragraph.style.display = "none";
    }
}

हमने ID hiddenText वाले एलिमेंट का चयन करके शुरू किया। यह उस पैराग्राफ टेक्स्ट को संदर्भित करता है जिसे हम "Read more" क्लिक करने पर प्रकट या गायब करना चाहते हैं।

हमने एक if स्टेटमेंट लिखा है जो जांचता है कि वह पैराग्राफ दिखाई दे रहा है या नहीं। यदि यह दिखाई नहीं दे रहा है, तो पैराग्राफ का display मान block पर सेट हो जाएगा, जिससे यह प्रकट होगा; अन्यथा, पैराग्राफ का display मान none पर सेट हो जाएगा, और इसलिए यह गायब हो जाएगा।

हमारा कोड अभी समाप्त नहीं हुआ है। अगला, हम एक इवेंट लिस्टनर बनाने जा रहे हैं जो हमारे "Read more" टेक्स्ट पर क्लिक करने पर सक्रिय होगा:

var showButton = document.getElementById("showMore");
showButton.addEventListener("click", toggleText);

यह कोड हमारे पेज पर Read more टेक्स्ट का चयन करता है। फिर यह एक इवेंट लिस्टनर सेट करता है जो "Read more" टेक्स्ट क्लिक होने पर हमारी toggleText() मेथड को ट्रिगर करेगा।

अब, आइए अपना वेब पेज खोलें और Read more टेक्स्ट पर क्लिक करने का प्रयास करें:

(यहाँ स्क्रीनशॉट होगा)

हमारा कोड कार्यात्मक है! जब आप "Read more" टेक्स्ट पर क्लिक करते हैं, तो टेक्स्ट प्रकट होता है। जब आप उस पर फिर से क्लिक करते हैं, तो टेक्स्ट गायब हो जाता है।

निष्कर्ष

getElementById() गेटर आपको वेब पेज पर उसके ID के आधार पर एक एलिमेंट पुनर्प्राप्त करने की अनुमति देता है।

क्या आप चुनौती ढूंढ रहे हैं? जब टेक्स्ट दिखाई दे तो "Read more" के मान को "Read less" में बदलने के लिए getElementById() गेटर का उपयोग करें। आगे जाने के लिए, आप पेज पर कुछ छवियां जोड़ सकते हैं और एक बटन बना सकते हैं जो बटन क्लिक होने पर उन सभी छवियों को छुपा दे।

अब आप getElementById() गेटर का उपयोग एक पेशेवर कोडर की तरह करना शुरू करने के लिए तैयार हैं!