यह ट्यूटोरियल जावास्क्रिप्ट में DOM तत्वों को चुनने के विभिन्न तरीकों को प्रदर्शित करेगा।
जावास्क्रिप्ट में डोम तत्वों का चयन करने के विभिन्न तरीके क्या हैं?
JavaScript में DOM तत्वों का चयन करने के लिए निम्न विधियों का उपयोग करें:
- getElementById () विधि
- getElementsByClassName () विधि
- getElementsByTagName () विधि
- क्वेरी चयनकर्ता () विधि
- querySelectorAll() विधि
विधि 1: 'getElementById ()' विधि का उपयोग करके DOM तत्वों का चयन करें
डीओएम तत्वों का चयन करने के लिए 'का उपयोग करें' getElementById () 'तत्व की असाइन की गई आईडी के आधार पर विधि। यह विधि किसी एकल तत्व को उसके अद्वितीय 'द्वारा चुनती है' पहचान ' गुण। यह निर्दिष्ट आईडी वाले तत्व का संदर्भ देता है और रिटर्न देता है ' व्यर्थ ” यदि कोई मेल खाने वाला तत्व नहीं मिलता है।
वाक्य - विन्यास
GetElementById() मेथड के लिए नीचे दिए गए सिंटैक्स का उपयोग करें:
दस्तावेज़। getElementById ( 'आईडीनाम' )
यहां ही ' आईडीनाम ” एक तत्व को सौंपी गई एक आईडी विशेषता का नाम है।
उदाहरण
एक HTML फ़ाइल में, 'का उपयोग करके एक div तत्व में दो शीर्षक बनाएं' एच 4 ' उपनाम। div एलिमेंट और हेडिंग 'h4' एलिमेंट को आईडी असाइन करें जिसका नाम ' डिव ' और ' शीर्षक ', क्रमश। केंद्र में संरेखित करने के लिए div तत्व में शैली विशेषता जोड़ें। इसके अलावा, एक वर्ग असाइन करें ' अनुभाग ” दूसरे शीर्षक के लिए जो अपना रंग बदलता है:
< डिव पहचान = 'डिव' शैली = 'पाठ-संरेखण: केंद्र;' >< एच 4 पहचान = 'शीर्षक' > विभिन्न विधियों का उपयोग करके DOM तत्वों तक पहुँचें < / एच 4 >
< एच 4 कक्षा = 'अनुभाग' पहचान = 'शीर्षक' > 'GetElementById ()' विधि का उपयोग करके JavaScript में DOM तत्वों का चयन करें
< / एच 4 >
< / डिव >
अब, हम प्राप्त करेंगे ' डिव 'तत्व' की मदद से अपनी निर्दिष्ट आईडी का उपयोग करते हुए getElementById () ' तरीका:
था getById = दस्तावेज़। getElementById ( 'डिव' ) ;आईडी के खिलाफ तत्व प्रिंट करें ' डिव ” कंसोल पर:
सांत्वना देना। लकड़ी का लट्ठा ( getById ) ;यह देखा जा सकता है कि आवश्यक HTML तत्व सफलतापूर्वक प्राप्त कर लिया गया है:
विधि 2: 'getElementsByClassName ()' विधि का उपयोग करके DOM तत्वों का चयन करें
आप DOM एलिमेंट को इसके असाइन किए गए वर्ग का उपयोग करके “की मदद से भी चुन सकते हैं getElementsByClassName () ' तरीका। यह उनके वर्ग के नाम से तत्वों की सूची का चयन करता है। यह एक लाइव HTMLCollection ऑब्जेक्ट को आउटपुट करता है, एक सरणी जैसी वस्तु जिसमें निर्दिष्ट वर्ग नाम वाले सभी तत्व होते हैं।
वाक्य - विन्यास
निम्नलिखित सिंटैक्स का उपयोग 'getElementsByClassName ()' विधि के लिए किया जाता है:
दस्तावेज़। getElementsByClassName ( 'कक्षा का नाम' )उदाहरण
यहां, हमें वह तत्व मिलेगा जिसमें वर्ग शामिल है ' अनुभाग ” और कंसोल पर प्रिंट करें:
था getByClass = दस्तावेज़। getElementsByClassName ( 'अनुभाग' ) ;सांत्वना देना। लकड़ी का लट्ठा ( getByClass ) ;
जैसा कि आप आउटपुट में देख सकते हैं, लंबाई 1 की एक सरणी दी गई है जिसमें एक तत्व शामिल है ' एच 4 'जो वर्ग से संबंधित है' अनुभाग ':
विधि 3: 'getElementsByTagName ()' विधि का उपयोग करके DOM तत्वों का चयन करें
यदि किसी तत्व को कोई आईडी या वर्ग नहीं दिया गया है, तो 'का उपयोग करें' getElementsByTagName () ” तत्व को उनके टैग नाम से प्राप्त करने की विधि। यह एक लाइव HTMLCollection ऑब्जेक्ट भी लौटाता है, जो एक सरणी-जैसी वस्तु है जिसमें निर्दिष्ट टैग नाम वाले सभी तत्व होते हैं।
वाक्य - विन्यास
टैग नाम के आधार पर तत्वों का चयन करने के लिए दिए गए सिंटैक्स का पालन करें:
getElementsByTagName ( टैग नाम )उदाहरण
टैग नाम पास करके 'getElementsByTagName ()' विधि को आमंत्रित करें ' एच 4 ”। फिर, कंसोल पर निर्दिष्ट टैग नाम से मेल खाने वाले तत्वों की सूची प्रिंट करें:
था getByTag = दस्तावेज़। getElementsByTagName ( 'एच4' ) ;सांत्वना देना। लकड़ी का लट्ठा ( getByTag ) ;
उत्पादन
विधि 4: 'क्वेरी चयनकर्ता ()' विधि का उपयोग करके डोम तत्वों का चयन करें
उपयोग ' क्वेरी चयनकर्ता () DOM तत्व प्राप्त करने की विधि। यह एक ऐसे तत्व का चयन करता है जो निर्दिष्ट सीएसएस चयनकर्ता से मेल खाता है। यह दस्तावेज़ में पाए जाने वाले पहले मेल खाने वाले तत्व को लौटाता है। यदि कोई तत्व मेल नहीं खाता है, तो यह ' देता है' व्यर्थ ”।
वाक्य - विन्यास
नीचे दिए गए सिंटैक्स का उपयोग 'क्वेरीसेलेक्टर ()' विधि के लिए किया जाता है:
दस्तावेज़। querySelector ( गुण )यहाँ, विशेषता एक CSS चयनकर्ता है, जैसे एक आईडी या वर्ग ' #मेरी आईडी '' ।मेरी कक्षा '।
उदाहरण
'क्वेरी चयनकर्ता ()' विधि को कॉल करें और आईडी पास करें ' #शीर्षक ' समान आईडी वाले तत्वों को प्राप्त करने के लिए:
था getByquery = दस्तावेज़। querySelector ( '#शीर्षक' ) ;सांत्वना देना। लकड़ी का लट्ठा ( getByquery ) ;
यह आउटपुट के रूप में पहला मिलान तत्व देता है:
विधि 5: 'querySelectorAll ()' विधि का उपयोग करके DOM तत्वों का चयन करें
यदि आप निर्दिष्ट विशेषता (आईडी या वर्ग) वाले सभी तत्वों का चयन करना चाहते हैं, तो 'का उपयोग करें' querySelectorAll () ' तरीका। यह उन तत्वों की सूची का चयन करता है जो एक विशेष परिभाषित सीएसएस चयनकर्ता से मेल खाते हैं। यह एक नोडलिस्ट ऑब्जेक्ट देता है जिसमें दस्तावेज़ में सभी तत्व शामिल होते हैं जो विशेष सीएसएस चयनकर्ता से मेल खाते हैं।
वाक्य - विन्यास
तत्वों की सूची प्राप्त करने के लिए निम्नलिखित सिंटैक्स का उपयोग करें:
दस्तावेज़। querySelectorAll ( गुण )उदाहरण
आईडी वाले मिलान किए गए तत्व की सूची प्राप्त करने के लिए ' शीर्षक ' साथ ' querySelectorAll () ” विधि और कंसोल पर तत्वों पर प्रिंट करें:
था getByqueryAll = दस्तावेज़। querySelectorAll ( '#शीर्षक' ) ;सांत्वना देना। लकड़ी का लट्ठा ( getByqueryAll ) ;
उत्पादन
यह जावास्क्रिप्ट में DOM तत्वों के चयन के बारे में है।
निष्कर्ष
जावास्क्रिप्ट में DOM तत्वों का चयन करने के लिए, 'का उपयोग करें' getElementById () ”, “ getElementsByClassName () ”, “ getElementsByTagName () ”, “ क्वेरी चयनकर्ता () ', या ' querySelectorAll () ' तरीका। ये विधियाँ DOM से तत्वों को उनके विशिष्ट पहचानकर्ताओं, वर्ग नामों, टैग नामों या CSS चयनकर्ताओं के आधार पर चुनने के विभिन्न तरीके प्रदान करती हैं। इस ट्यूटोरियल ने JavaScript में DOM तत्वों को चुनने के विभिन्न तरीकों का प्रदर्शन किया।