आपके वेब डेवलपमेंट करियर में DOM को समझना आवश्यक है। आपको पता होना चाहिए कि डोम में विभिन्न तत्वों का चयन कैसे करना है, ताकि आप उनकी सामग्री पढ़ सकें या उन्हें संशोधित कर सकें।
DOM ट्रैवर्सिंग वर्णन करता है कि HTML दस्तावेज़ उत्पन्न करने वाली ट्री-जैसी संरचना को कैसे नेविगेट करें। यहां जावास्क्रिप्ट के साथ DOM को ट्रैवर्स करने के बारे में पूरी गाइड दी गई है।
डोम ट्रैवर्सिंग क्या है?
दस्तावेज़ वस्तु मॉडल, या DOM संक्षेप में, एक HTML दस्तावेज़ का एक पेड़ जैसा प्रतिनिधित्व है। यह एक प्रदान करता है एपीआई जो आपको, वेब डेवलपर के रूप में, JavaScript का उपयोग करके किसी वेबसाइट के साथ इंटरैक्ट करने की अनुमति देता है।
DOM में प्रत्येक आइटम को नोड के रूप में जाना जाता है। केवल DOM के माध्यम से आप अपने HTML दस्तावेज़ की संरचना, सामग्री और शैली में हेरफेर कर सकते हैं।
DOM ट्रैवर्सल (DOM को चलना या नेविगेट करना भी कहा जाता है) अन्य नोड्स से DOM ट्री में नोड्स का चयन करने का कार्य है। आप शायद पहले से ही कई तरीकों से परिचित हैं DOM ट्री में तत्वों तक पहुँचना उनके आईडी, वर्ग, या टैग नाम से। जैसे तरीकों का इस्तेमाल कर सकते हैं दस्तावेज़.क्वेरी चयनकर्ता () और दस्तावेज़.getElementById () ऐसा करने के लिए।
डोम को और अधिक कुशल और मजबूत तरीके से नेविगेट करने के लिए आप संयोजन के रूप में अन्य तरीकों का उपयोग कर सकते हैं। जैसा कि आप कल्पना कर सकते हैं, पूर्ण खोज करने के बजाय मानचित्र पर पहले से ज्ञात बिंदु से खोज करना बेहतर है।
उदाहरण के लिए, पूरे पेड़ में इसकी खोज करने की तुलना में इसके माता-पिता से एक बाल तत्व का चयन करना आसान और अधिक कुशल है।
ट्रैवर्स करने के लिए एक नमूना दस्तावेज़
एक बार आपके पास DOM ट्री में दिए गए नोड तक पहुंच हो जाने के बाद, आप इसके संबंधित नोड्स को विभिन्न तरीकों से एक्सेस कर सकते हैं। आप अपने चयनित नोड से DOM ट्री में नीचे, ऊपर या बग़ल में जा सकते हैं।
पहली विधि में शीर्ष-सबसे नोड (जैसे दस्तावेज़ नोड) से शुरू होने वाले तत्व की खोज करना और नीचे की ओर बढ़ना शामिल है।
दूसरा तरीका इसके विपरीत है: आप एक आंतरिक तत्व से पेड़ पर चढ़ते हैं, एक बाहरी तत्व की खोज करते हैं। अंतिम विधि तब होती है जब आप दस्तावेज़ ट्री में समान स्तर पर किसी अन्य तत्व से एक तत्व की खोज करते हैं (जिसका अर्थ है कि दो तत्व भाई-बहन हैं)।
प्रदर्शित करने के लिए, इस उदाहरण HTML दस्तावेज़ पर विचार करें:
<!DOCTYPE html>
<एचटीएमएल लैंग ="एन">
<सिर>
<मेटा चारसेट ="यूटीएफ-8" />
<मेटा http-equiv="एक्स-UA- संगत" सामग्री ="आईई = किनारा" />
<मेटा नाम ="व्यूपोर्ट" सामग्री ="चौड़ाई = उपकरण-चौड़ाई, प्रारंभिक-पैमाना = 1.0" />
<शीर्षक>नमूना पृष्ठ</title>
</head><शरीर>
<मुख्य>
<एच 1>मेरा पृष्ठ शीर्षक</h1>
<पी>अच्छा कैप्शन यहाँ जाता है</पी><लेख वर्ग ="पहला लेख">
<एच 2>अद्भुत फलों की सूची</h2>
<पी>फल जरूर खाना चाहिए</पी><डिव क्लास ="रैपर-1">
<उल वर्ग ="apple-list">
<ली वर्ग ="सेब">सेब</li>
<ली वर्ग ="नारंगी">संतरे</li>
<ली वर्ग ="एवोकाडो">avocados</li>
<ली वर्ग ="अंगूर">
अंगूर<उल>
<ली वर्ग ="श्रेणी 1">चंद्रमा गिरता है</li>
<ली>सुलतान की माता</li>
<ली>सामंजस्य</li>
<ली>क्रिमसन सीडलेस</li>
</ul>
</li>
<ली वर्ग ="केला">केले</li>
</ul><बटन क्लास ="बीटीएन-1">पढ़ें पूरी लिस्ट</button>
</div>
</article><लेख वर्ग ="Second__Article">
<एच 2>केन्या में अद्भुत स्थान</h2>
<पी>केन्या में स्थानों का दौरा करना चाहिए</पी><डिव क्लास ="आवरण-2">
<उल वर्ग ="स्थानों-सूची">
<ली>मसाई मारा</li>
<ली>डायनी बीच</li>
<ली>वातमू बीच</li>
<ली>अंबोसली राष्ट्रीय उद्यान</li>
<ली>नाकुरु झील</li>
</ul><बटन क्लास ="बीटीएन-2">पढ़ें पूरी लिस्ट</button>
</div>
</article>
</main>
</body>
</html>
DOM को नीचे की ओर ले जाना
आप दो तरीकों में से एक का उपयोग करके DOM को नीचे की ओर ले जा सकते हैं। पहला सामान्य चयनकर्ता विधि है (तत्व.क्वेरी चयनकर्ता या Element.querySelectorAll). दूसरे, आप का उपयोग कर सकते हैं बच्चे या चाइल्डनोड्स संपत्ति। दो अन्य विशेष गुण भी हैं, अर्थात्, आखरी बच्चा और पहला बच्चा.
चयनकर्ता विधियों का उपयोग करना
querySelector() विधियाँ आपको एक या अधिक तत्वों की खोज करने की अनुमति देती हैं जो किसी दिए गए चयनकर्ता से मेल खाते हैं। उदाहरण के लिए, आप "प्रथम-लेख" के वर्ग के साथ पहले तत्व की खोज कर सकते हैं document.querySelector('.first-article'). और सब लाने के लिए एच 2 दस्तावेज़ में तत्व, आप का उपयोग कर सकते हैं querySelectorAll तरीका: document.querySelectorAll('h2'). querySelectorAll विधि मेल खाने वाले तत्वों की नोड सूची लौटाती है; आप ब्रैकेट नोटेशन का उपयोग करके प्रत्येक आइटम का चयन कर सकते हैं:
कॉन्स्ट शीर्षक = दस्तावेज़.querySelectorAll('h2');
कॉन्स्ट फर्स्टहेडिंग = हेडिंग [0]; // पहले h2 तत्व का चयन करना
कॉन्स्ट दूसरा शीर्षक = शीर्षक [1]; // दूसरे h2 तत्व का चयनचयनकर्ता विधियों का उपयोग करते समय प्रमुख पकड़ यह है कि आपको चयनकर्ता से पहले उपयुक्त प्रतीकों का उपयोग करना चाहिए, जैसा कि आप CSS में करते हैं। उदाहरण के लिए, कक्षाओं के लिए ".classname" और आईडी के लिए "#id"।
याद रखें कि परिणाम एक HTML तत्व होगा, न कि केवल चयनित तत्व की आंतरिक सामग्री। सामग्री तक पहुँचने के लिए आप नोड का उपयोग कर सकते हैं innerHTML संपत्ति:
दस्तावेज़.querySelector('.नारंगी').आंतरिकHTMLचिल्ड्रन या चाइल्डनोड्स प्रॉपर्टीज का उपयोग करना
बच्चे संपत्ति सभी बाल तत्वों का चयन करती है जो सीधे किसी दिए गए तत्व के अंतर्गत होते हैं। यहाँ का एक उदाहरण है बच्चे कार्रवाई में संपत्ति:
कॉन्स्ट सेब सूची = दस्तावेज़.querySelector('.apple-list');
कॉन्स्ट सेब = सेब की सूची। बच्चे;
सांत्वना देनालॉग (सेब);लॉगिंग सेब कंसोल के लिए एक HTML संग्रह के रूप में "सेब-सूची" वर्ग के साथ सीधे तत्व के तहत सभी सूची आइटमों का एक सेट प्रदर्शित करेगा। एक HTML संग्रह एक सरणी-जैसी वस्तु है, इसलिए आप querySelectorAll के साथ आइटम का चयन करने के लिए ब्रैकेट नोटेशन का उपयोग कर सकते हैं।
से भिन्न बच्चे संपत्ति, चाइल्डनोड्स सभी प्रत्यक्ष बाल नोड्स लौटाता है (न केवल बाल तत्व)। यदि आप केवल बाल तत्वों में रूचि रखते हैं, केवल सूची आइटम कहें, का उपयोग करें बच्चे संपत्ति।
स्पेशल लास्टचाइल्ड और फर्स्टचाइल्ड प्रॉपर्टीज का उपयोग करना
ये दो तरीके पहले दो की तरह मजबूत नहीं हैं। जैसा कि उनके नाम से पता चलता है, द आखरी बच्चा और पहला बच्चा गुण किसी तत्व के अंतिम और पहले बच्चे के नोड को लौटाते हैं।
कॉन्स्ट सेब सूची = दस्तावेज़.querySelector('.apple-list');
कॉन्स्ट फर्स्टचाइल्ड = ऐप्पललिस्ट.फर्स्टचाइल्ड;
कॉन्स्ट lastChild = appleList.lastChild;DOM को ऊपर की ओर ट्रैवर्स करना
आप डीओएम का उपयोग करके नेविगेट कर सकते हैं parentElement (या पेरेंटनोड) और निकटतम गुण।
पेरेंट एलिमेंट या पेरेंटनोड का उपयोग करना
दोनों parentElement या पेरेंटनोड गुण आपको चयनित तत्व के पैरेंट नोड को एक स्तर ऊपर चुनने देते हैं। महत्वपूर्ण अंतर यह है parentElement केवल मूल नोड चुनता है जो एक तत्व है। वहीं दूसरी ओर, पेरेंटनोड माता-पिता का चयन कर सकते हैं चाहे वह एक तत्व या एक अलग नोड प्रकार हो।
नीचे दिए गए कोड नमूने में, हम उपयोग करते हैं parentElement "सेब-सूची" से "आवरण -1" वर्ग के साथ div का चयन करने के लिए:
कॉन्स्ट सेब सूची = दस्तावेज़.querySelector('.apple-list');
कॉन्स्ट पेरेंटडिव = AppleList.parentElement;
सांत्वना देनालॉग (पेरेंटडिव); // वर्ग आवरण -1 के साथ div तत्व प्रदर्शित करता हैनिकटतम संपत्ति का उपयोग करना
निकटतम संपत्ति पहले मूल तत्व का चयन करती है जो निर्दिष्ट चयनकर्ता से मेल खाती है। यह आपको एक के बजाय कई स्तरों का चयन करने देता है। उदाहरण के लिए, यदि हमारे पास पहले से ही चयनित वर्ग "btn-1" वाला बटन है, तो हम इसका चयन कर सकते हैं मुख्य तत्व का उपयोग करना निकटतम संपत्ति इस प्रकार है:
कॉन्स्ट बीटीएन1 = दस्तावेज़.querySelector('.btn-1');
const mainEl = btn1.निकटतम ('मुख्य');
सांत्वना देनालॉग (मेनईएल); // मुख्य तत्व प्रदर्शित करता हैपसंद querySelector और querySelectorAllमें उपयुक्त चयनकर्ताओं का उपयोग करें निकटतम तरीका।
DOM को तिरछी दिशा में ले जाना
DOM को एक तरफ घुमाने के लिए दो तरीके उपलब्ध हैं। आप उपयोग कर सकते हैं nextElementSibling या पिछलाएलिमेंटसिबलिंग. उपयोग nextElementSibling निम्नलिखित सहोदर तत्व का चयन करने के लिए और पिछलाएलिमेंटसिबलिंग पिछले भाई बहन का चयन करने के लिए।
कॉन्स्ट नारंगी = दस्तावेज़.querySelector('.नारंगी');
कॉन्स्ट सेब = नारंगी। पिछला एलिमेंट सिब्लिंग;
कॉन्स्ट एवोकाडो = ऑरेंज.नेक्स्ट एलिमेंट सिब्लिंग; समतुल्य भी हैं अगलाभाई और पिछलाभाई गुण जो सभी नोड प्रकारों से भी चयन करते हैं, केवल तत्व नहीं।
DOM ट्रैवर्सल प्रॉपर्टीज और मेथड्स को चेन करके और अधिक करें
उपरोक्त सभी विधियाँ और गुण आपको DOM में किसी भी नोड का चयन करने में सक्षम कर सकते हैं। हालाँकि, कुछ मामलों में, आप पहले ऊपर जाना चाहेंगे, फिर नीचे या बग़ल में। उस स्थिति में, अलग-अलग संपत्तियों को एक साथ जोड़ना उपयोगी साबित होगा।