तो, आप जावास्क्रिप्ट में एक वेब पेज पर एक तत्व का चयन करना चाहते हैं? getElementById . की यही खासियत है विधि, तत्व का तथाकथित राजा getters जावास्क्रिप्ट में।

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

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

चलो गोता लगाएँ!

getElementById क्या है?

getElementById() एक दस्तावेज़ विधि है जो आपके द्वारा निर्दिष्ट तत्व आईडी विशेषता के आधार पर एक पृष्ठ पर HTML DOM से एक तत्व का चयन करती है।

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

index.htmlयह एक बटन है!scripts.jsconst बटन =document.getElementById("mainButton");

हमारे HTML कोड में, हमने एक <button> . परिभाषित किया है तत्व जिसका आईडी mainButton . है . हमारा जावास्क्रिप्ट कोड getElementById() . का उपयोग करके इस घटक को पुनः प्राप्त करेगा तरीका।

यदि आप किसी पृष्ठ पर किसी एक तत्व को पुनः प्राप्त करना चाहते हैं तो यह विधि उपयोगी है। यदि आप HTML और CSS सीखने के बारे में सोचते हैं, तो आपको पता चल जाएगा कि आईडी अद्वितीय होनी चाहिए। यह getElementById() . बनाता है एकल तत्वों को पुनः प्राप्त करने के लिए एकदम सही।

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

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

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

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

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

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

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

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

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

const बटन =document.getElementById("#mainButton");

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

const बटन =document.getElementById("mainButton");

अब यह गलत है, हम एक उदाहरण देख सकते हैं।

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

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

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

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

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

  <शीर्षक> getElementById() का परिचय    
 
JavaScript getElementById()
 

क्या आप getElementById() के बारे में अधिक जानना चाहते हैं? आप सही जगह पर आए हैं।
 और पढ़ें 
getElementById() एक जावास्क्रिप्ट विधि है जो आपको एक तत्व का चयन करने की अनुमति देती है एक वेब पेज। इस विधि को आमतौर पर "गेट्टर" के रूप में संदर्भित किया जाता है क्योंकि यह एक पृष्ठ से एक तत्व "प्राप्त" करता है।
 
   

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

 Styles.css नामक फ़ाइल खोलें और इस कोड में पेस्ट करें:
 
 
  <शीर्षक> getElementById() का परिचय    
 
JavaScript getElementById()
 

क्या आप getElementById() के बारे में अधिक जानना चाहते हैं? आप सही जगह पर आए हैं।
 और पढ़ें 
getElementById() एक जावास्क्रिप्ट विधि है जो आपको एक तत्व का चयन करने की अनुमति देती है एक वेब पेज। इस विधि को आमतौर पर "गेट्टर" के रूप में संदर्भित किया जाता है क्योंकि यह एक पृष्ठ से एक तत्व "प्राप्त" करता है।
 
   

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

 
 

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

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

 Scripts.js नाम की एक फाइल बनाएं और इस कोड में पेस्ट करें:
 
 
var पैराग्राफ =document.getElementById("hiddenText");paragraph.style.display ="none";
 

 हमारे कोड में, हमने getElementById() . का उपयोग किया है डीओएम दस्तावेज़ से हमारे अनुच्छेद को पुनः प्राप्त करने के लिए। छिपे हुए टेक्स्ट दस्तावेज़ ऑब्जेक्ट का चयन करता है और इसे छुपाता है। इसके बाद, हम एक फंक्शन बनाएंगे जो हमारे टेक्स्ट को टॉगल करेगा:
 
 
फ़ंक्शन टॉगलटेक्स्ट() { अगर (पैराग्राफ.स्टाइल.डिस्प्ले ==="कोई नहीं") { पैराग्राफ.स्टाइल.डिस्प्ले ="ब्लॉक"; } और { पैराग्राफ.स्टाइल.डिस्प्ले ="कोई नहीं"; }} 

 हमने hiddenText . आईडी वाले एलिमेंट को चुनकर शुरुआत की है . यह टेक्स्ट के उस पैराग्राफ को संदर्भित करता है जिसे हम "और पढ़ें" पर क्लिक करने पर दिखना या गायब होना चाहते हैं। 
 
 

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

 हमारा कोड अभी समाप्त नहीं हुआ है। इसके बाद, हम एन इवेंट श्रोता बनाने जा रहे हैं जो हमारे "और पढ़ें" टेक्स्ट पर क्लिक करने पर सक्रिय हो जाएगा:
 
 
var showButton =document.getElementById("showMore");showButton.addEventListener("क्लिक करें", टॉगल टेक्स्ट);
 

 यह कोड Read more . का चयन करता है हमारे पेज पर टेक्स्ट। इसके बाद यह एक ईवेंट श्रोता सेट करता है जो हमारे toggleText() . को ट्रिगर करेगा विधि जब "और पढ़ें" टेक्स्ट पर क्लिक किया जाता है। 
 
 

 अब, अपना वेब पेज खोलें और Read more . पर क्लिक करने का प्रयास करें मूलपाठ:
 
  

 हमारा कोड कार्यात्मक है! जब आप "और पढ़ें" टेक्स्ट पर क्लिक करते हैं, तो टेक्स्ट दिखाई देता है। जब आप उस पर दोबारा क्लिक करते हैं, तो टेक्स्ट गायब हो जाता है।
 
निष्कर्ष
 

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

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

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