दस्तावेज़ ऑब्जेक्ट मॉडल (डीओएम) एक HTML दस्तावेज़ का संरचनात्मक प्रतिनिधित्व है। DOM नोड्स का एक ट्री है जिसे ब्राउज़र इंटरनेट पर प्रत्येक वेबपेज के लिए बनाता है।
डोम ऑब्जेक्ट-ओरिएंटेड है। डीओएम में प्रत्येक तत्व की विशेषताओं और विधियों का अपना सेट होता है जिसे आप जावास्क्रिप्ट का उपयोग करके एक्सेस कर सकते हैं।
इस ट्यूटोरियल लेख में, आप सीखेंगे कि वेबपेज के तत्वों तक पहुँचने के लिए DOM चयनकर्ता फ़ंक्शन का उपयोग कैसे करें।
डोम तत्वों तक कैसे पहुँचें
आप वैश्विक दस्तावेज़ ऑब्जेक्ट के माध्यम से वेबपेज के शीर्ष-स्तरीय DOM तत्व तक पहुँच सकते हैं। उदाहरण के लिए, यदि आपके पास निम्न जैसा वेब पेज है:
डाक्यूमेंट
स्वागत
लोरेम इप्सम डोलर सिट एमेट कंसेक्टेटूर एडिपिसिसिंग एलीट। टेनेटुर एस्परियोरेस वोलुप्टैटम और रिपेलैट?
क्यूए उस्तो नॉन एलिगेंडी हिक एक्यूसमस इटैक्यू यूट इन डेलेक्टस सिंट पर्सपिसियाटिस क्वोस रेम ए, एट वेनिअम।
के बारे में
लोरेम इप्सम डोलर सिट एमेट कंसेक्टेटूर एडिपिसिसिंग एलीट। टेनेटुर एस्परियोरेस वोलुप्टैटम और रिपेलैट?
क्यूए उस्तो नॉन एलिगेंडी हिक एक्यूसमस इटैक्यू यूट इन डेलेक्टस सिंट पर्सपिसियाटिस क्वोस रेम ए, एट वेनिअम।
सामग्री
लेख शीर्षक एक
लोरेम इप्सम डोलर सिट एमेट कंसेक्टेटूर एडिपिसिसिंग एलीट। टेनेटुर एस्परियोरेस वोलुप्टैटम और रिपेलैट?
क्यूए उस्तो नॉन एलिगेंडी हिक एक्यूसमस इटैक्यू यूट इन डेलेक्टस सिंट पर्सपिसियाटिस क्वोस रेम ए, एट वेनिअम।
अधिक पढ़ें
लेख शीर्षक दो
लोरेम इप्सम डोलर सिट एमेट कंसेक्टेटूर एडिपिसिसिंग एलीट। टेनेटुर एस्परियोरेस वोलुप्टैटम और रिपेलैट?
क्यूए उस्तो नॉन एलिगेंडी हिक एक्यूसमस इटैक्यू यूट इन डेलेक्टस सिंट पर्सपिसियाटिस क्वोस रेम ए, एट वेनिअम।
अधिक पढ़ें
लेख शीर्षक तीन
लोरेम इप्सम डोलर सिट एमेट कंसेक्टेटूर एडिपिसिसिंग एलीट। टेनेटुर एस्परियोरेस वोलुप्टैटम और रिपेलैट?
क्यूए उस्तो नॉन एलिगेंडी हिक एक्यूसमस इटैक्यू यूट इन डेलेक्टस सिंट पर्सपिसियाटिस क्वोस रेम ए, एट वेनिअम।
अधिक पढ़ें
लेख शीर्षक चार
लोरेम इप्सम डोलर सिट एमेट कंसेक्टेटूर एडिपिसिसिंग एलीट। टेनेटुर एस्परियोरेस वोलुप्टैटम और रिपेलैट?
क्यूए उस्तो नॉन एलिगेंडी हिक एक्यूसमस इटैक्यू यूट इन डेलेक्टस सिंट पर्सपिसियाटिस क्वोस रेम ए, एट वेनिअम।
अधिक पढ़ें
टाइपिंग डाक्यूमेंट आपके ब्राउज़र कंसोल में और एंटर मारने से निम्न आउटपुट उत्पन्न होगा:
आपके कंसोल में आउटपुट इंटरैक्टिव है। आप पर क्लिक कर सकते हैं सिर तथा तन तत्वों का विस्तार करने के लिए। ऐसा करने से निम्न आउटपुट प्राप्त होगा:
में प्रत्येक अनुभाग तत्व टैग भी विस्तार योग्य है। वेब पेज की संरचना के आधार पर, अधिक तत्वों को प्रकट करने के लिए तत्वों का विस्तार होता रहेगा। इससे आपको डीओएम की संरचना की स्पष्ट समझ मिलनी चाहिए।
सम्बंधित: वेबसाइटों का हिडन हीरो: डोम को समझना
दस्तावेज़ वस्तु में एक विशेष संपत्ति है, तन, शरीर तत्व का प्रतिनिधित्व। तो, शरीर तत्व तक पहुँचने के लिए आप कंसोल में निम्नलिखित टाइप कर सकते हैं:
दस्तावेज़.बॉडी
यह निम्नलिखित आउटपुट का उत्पादन करेगा:
लेकिन यह तब तक है जब तक आप ऑब्जेक्ट गुणों का उपयोग करके जा सकते हैं। प्रत्येक पृष्ठ में एक सिर और एक शरीर होता है लेकिन अन्यथा अद्वितीय होता है। तो टाइपिंग दस्तावेज़.शरीर.अनुभाग या कुछ भी ऐसा ही काम नहीं करेगा जैसा आप चाहें। इसके बजाय, ऐसी विधियाँ हैं जिन्हें आप विशिष्ट तत्वों तक पहुँचने के लिए दस्तावेज़ ऑब्जेक्ट पर कॉल कर सकते हैं।
डोम तत्व चयनकर्ता क्या हैं?
DOM तत्व चयनकर्ता जावास्क्रिप्ट विधियों का एक समूह है जिसका उपयोग आप किसी वेब पेज में तत्वों तक पहुँचने के लिए दस्तावेज़ ऑब्जेक्ट पर कर सकते हैं। DOM तत्व चयनकर्ताओं की दो श्रेणियां हैं—एकल और एकाधिक चयनकर्ता।
ये फ़ंक्शन CSS चयनकर्ताओं के समान कार्य करते हैं। वे आपको उनके टैग नाम, या उनकी आईडी और वर्ग विशेषताओं के आधार पर तत्वों को पुनः प्राप्त करने की अनुमति देते हैं। आप किसी भी CSS चयनकर्ता का उपयोग करके तत्व भी प्राप्त कर सकते हैं।
सम्बंधित: CSS चयनकर्ताओं का उपयोग करके वेब पेज के हिस्से को कैसे लक्षित करें
एकल तत्व चयनकर्ता हैं:
- getElementById ()
- क्वेरी चयनकर्ता ()
एकाधिक तत्व चयनकर्ता हैं:
- getElementsByTagName ()
- getElementsByClassName ()
- क्वेरी चयनकर्ता सभी ()
आपके द्वारा उपयोग किया जाने वाला DOM तत्व चयनकर्ता उस तत्व (तत्वों) पर निर्भर करेगा, जिस तक आप पहुँच प्राप्त करने का प्रयास कर रहे हैं।
एकल डोम तत्व चयनकर्ताओं का उपयोग करना
आप ज्यादातर जावास्क्रिप्ट अनुप्रयोगों के भीतर चयनकर्ता देखेंगे। तो, चलो कंसोल से दूर चले जाते हैं। एक जावास्क्रिप्ट फ़ाइल बनाएँ और निम्नलिखित स्क्रिप्ट टैग का उपयोग करके इसे अपनी HTML फ़ाइल से लिंक करें:
जहां src value आपकी JavaScript फ़ाइल का नाम है। इस स्क्रिप्ट टैग को अपने क्लोजिंग बॉडी टैग के ठीक पहले रखें, .
getElementById () विधि किसी वेबपृष्ठ पर उसकी आईडी के मान का उपयोग करके किसी एक तत्व तक पहुंच प्रदान करती है। ऊपर दिए गए HTML दस्तावेज़ में आईडी के साथ कई तत्व हैं। लक्षित करने के लिए डिव तत्व "आलेख-3" आईडी के साथ आप अपनी जावास्क्रिप्ट फ़ाइल में निम्नलिखित कोड जोड़ सकते हैं:
value = document.getElementById('Article-3')
अब div तत्व के साथ लेख-3 आईडी और उसके सभी संबंधित गुण से सुलभ हैं मूल्य चर। आप प्रिंट कर सकते हैं मूल्य कोड की निम्न पंक्ति का उपयोग करके कंसोल के लिए चर:
कंसोल.लॉग (मान)
आप उस वर्ग का नाम देखेंगे जो div तत्व के साथ-साथ अन्य महत्वपूर्ण विशेषताओं, जैसे कि आंतरिक HTML को सौंपा गया है।
अन्य एकल तत्व चयनकर्ता है क्वेरी चयनकर्ता (). यह फ़ंक्शन अधिक बहुमुखी है, क्योंकि आप इसे किसी भी CSS चयनकर्ता स्ट्रिंग को पास कर सकते हैं। हालाँकि, आप अभी भी इसका उपयोग एक समय में केवल एक तत्व का चयन करने के लिए कर सकते हैं।
उदाहरण के लिए, ऊपर दिए गए HTML लेआउट में एक ही वर्ग है—लेख। चार div तत्व इस वर्ग का उपयोग करते हैं, लेकिन क्वेरी चयनकर्ता () फ़ंक्शन केवल पहला तत्व लौटाएगा जिसमें "लेख" वर्ग है।
एक वर्ग के साथ querySelector () का उपयोग करना
अपनी स्क्रिप्ट के अंत में निम्न कोड जोड़ें:
मूल्य = दस्तावेज़। क्वेरी चयनकर्ता ('. लेख')
कंसोल.लॉग (मान)
यह केवल पहला लौटाएगा डिव एक "लेख" वर्ग के साथ तत्व। ध्यान दें कि आप चयनकर्ता को उसी प्रारूप में निर्दिष्ट करते हैं जैसे सीएसएस चयनकर्ता। CSS में, एक प्रमुख अवधि एक वर्ग का नाम निर्दिष्ट करती है।
एक आईडी के साथ querySelector() का उपयोग करना
value = document.querySelector('# article-3')
कंसोल.लॉग (मान)
यह कोड "आलेख -3" आईडी के साथ एकमात्र तत्व लौटाएगा, तीसरा डिव एक "लेख" वर्ग के साथ तत्व। फिर से, चयनकर्ता स्ट्रिंग मानक CSS सिंटैक्स का उपयोग करता है, जिसमें a # एक आईडी निर्दिष्ट करने वाला प्रतीक।
एकाधिक डोम तत्व चयनकर्ताओं का उपयोग करना
शेष चयनकर्ता कार्य तत्वों के समूह को पुनः प्राप्त करते हैं। वे getElementsByTagName (), getElementsByClassName (), तथा क्वेरी चयनकर्ता सभी ().
getElementsByTagName का उपयोग करना ()
getElementsByTagName () चयनकर्ता समान टैग नाम वाले तत्वों का एक समूह प्राप्त करता है। उदाहरण के लिए, यदि आप सभी का चयन करना चाहते हैं एच 2 वेब पेज पर तत्व, आप निम्न कोड का उपयोग कर सकते हैं:
value = document.getElementsByTagName('h2')
कंसोल.लॉग (मान)यह सभी h2 तत्वों को एक HTML संग्रह में संग्रहीत करता है जिसे value कहा जाता है।
getElementsByClassName का उपयोग करना ()
getElementsByClassName () चयनकर्ता समान वर्ग नाम वाले तत्वों का संग्रह देता है।
मूल्य = दस्तावेज़। getElementsByClassName ('लेख')
कंसोल.लॉग (मान)
उपरोक्त कोड को अपनी जावास्क्रिप्ट फ़ाइल में डालने से ब्राउज़र कंसोल में "लेख" वर्ग नाम के साथ चार div तत्व वापस आ जाएंगे।
querySelectorAll () का उपयोग करना
क्वेरी चयनकर्ता सभी () विधि दिए गए चयनकर्ता से मेल खाने वाले सभी तत्वों की एक नोड सूची लौटाती है। ब्लॉग अनुभाग में सभी अनुच्छेद तत्वों तक पहुँचने के लिए, आप निम्नलिखित कोड का उपयोग कर सकते हैं:
value = document.querySelectorAll('#blog p')
कंसोल.लॉग (मान)आप स्ट्रिंग में कई चयनकर्ताओं को भी शामिल कर सकते हैं, प्रत्येक को अल्पविराम से अलग करते हुए, जैसे कि CSS में:
value = document.querySelectorAll('h2, .articles')
कंसोल.लॉग (मान)डायनामिक वेब पेज बनाने के लिए DOM चयनकर्ताओं का उपयोग करें
इस बिंदु पर, आपको DOM की स्पष्ट समझ होनी चाहिए और यह कैसे काम करता है। आपको अलग-अलग एकल और एकाधिक चयनकर्ताओं के साथ-साथ उनका उपयोग करने का तरीका भी पता होना चाहिए।
फिर भी, HTML तत्वों तक पहुंच प्राप्त करना केवल पहला कदम है जो आप DOM चयनकर्ताओं के साथ कर सकते हैं। DOM चयनकर्ता आपकी वेबसाइट के कार्यात्मक पहलुओं, जैसे ऑनक्लिक और ऑनस्क्रॉल ईवेंट को प्रबंधित करने में आपकी सहायता करने में बहुत मदद करेंगे।
आपने अपनी वेबसाइट HTML और CSS के साथ सेट की है, लेकिन अब आपको तर्क जोड़ने की आवश्यकता है। यहाँ क्या करना है।
आगे पढ़िए
- प्रोग्रामिंग
- एचटीएमएल
- जावास्क्रिप्ट
- वेब विकास
कदीशा कीन एक पूर्ण-स्टैक सॉफ़्टवेयर डेवलपर और तकनीकी/प्रौद्योगिकी लेखक हैं। उसके पास कुछ सबसे जटिल तकनीकी अवधारणाओं को सरल बनाने की विशिष्ट क्षमता है; उत्पादन सामग्री जिसे कोई भी तकनीकी नौसिखिया आसानी से समझ सकता है। उसे लिखने, दिलचस्प सॉफ्टवेयर विकसित करने और दुनिया की यात्रा (वृत्तचित्रों के माध्यम से) करने का शौक है।
हमारे न्यूज़लेटर की सदस्यता लें
तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!
सब्सक्राइब करने के लिए यहां क्लिक करें