जावास्क्रिप्ट डोम क्या है?

जावास्क्रिप्ट दस्तावेज़ ऑब्जेक्ट मॉडल (डीओएम) एक वेबपेज के HTML तत्वों का प्रतिनिधित्व है। यह एक इंटरफ़ेस है जिसका उपयोग हम किसी वेब पेज की सामग्री या शैली को बदलकर उसमें हेरफेर करने के लिए कर सकते हैं।

हम वेबपेज पर राइट क्लिक करके और 'निरीक्षण' का चयन करके DOM तक पहुँच सकते हैं। ऐसा करने से, जिस वेबपेज पर आप वर्तमान में हैं, उसके HTML तत्वों के साथ एक अनुभाग (दाईं ओर या बाईं ओर) दिखाई देना चाहिए। इन तत्वों पर होवर करके, आप बता सकते हैं कि पृष्ठ के कौन से अनुभाग उनके द्वारा दर्शाए जा रहे हैं क्योंकि पृष्ठ के अनुभाग स्वयं हाइलाइट हो जाते हैं।

हम कंसोल में कोडिंग करके पेज की सामग्री या स्टाइल में हेरफेर कर सकते हैं।

डीओएम स्वयं माता-पिता और नेस्टेड बच्चों के तत्वों के साथ एक पेड़ डेटा संरचना है। बिना संतान वाले तत्व 'पत्ते' कहलाते हैं। एक पृष्ठ का निरीक्षण करते समय, आप देख सकते हैं कि हमारे पेड़ का हमारा हेड नोड तत्व दस्तावेज़ है, फिर हमारा एचटीएमएल टैग, फिर हमारा हेड टैग, जिसमें स्क्रिप्ट और हमारा शीर्षक है, जो एक पेड़ के रूप में शाखाबद्ध होता है। हम अपने बॉडी टैग को भी देख सकते हैं, जो कि हेड टैग से अलग होता है और एक अलग तत्व को लेकर एक अलग पेड़ में शाखाओं को बंद कर देता है। करियर कर्म के होम पेज का प्रतिनिधित्व करने के लिए उपयोग किए जाने वाले तत्वों का एक उदाहरण नीचे दिया गया है।

ध्यान दें कि बॉडी टैग के किसी विशेष डिव एलिमेंट चाइल्ड पर होवर करते समय होमपेज का सही सेक्शन कैसे हाइलाइट हो जाता है। इस लेख में, हम भविष्य में इसमें हेरफेर करने में सक्षम होने के लिए DOM में तत्वों का चयन करने के तरीकों पर चर्चा करते हैं।

DOM में तत्वों का चयन करना

डीओएम में तत्वों का चयन करने के दो तरीके हैं। एक getElements विधियों का उपयोग कर रहा है, दूसरा querySelector विधियों का उपयोग कर रहा है।

getElement तरीके

GetElement विधियां टैग नाम, वर्ग नाम या आईडी के एकल स्ट्रिंग तर्क लेती हैं। टैग और वर्ग का नाम एक HTML संग्रह नामक एक सरणी जैसी वस्तु लौटाएगा जो बताता है कि आप जिस तत्व की तलाश कर रहे हैं वह पृष्ठ पर कितनी बार होता है।

document.getElementsByTagName(‘p’) :ध्यान दें कि वर्तमान में करियर कर्मा के होमपेज पर सात p टैग हैं।

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

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

document.getElementsByClassName(‘hzjqne’) :यह दिए गए वर्ग के सभी तत्वों वाले HTML संग्रह को वापस कर देगा।

document.getElementById(‘__NEXT_DATA__’) :आईडी द्वारा तत्व प्राप्त करना कंसोल में मिलान करने वाला तत्व वापस कर देगा। चूंकि आईडी नाम अद्वितीय होना चाहिए, इसलिए उन्हें किसी भी चीज़ का संग्रह वापस नहीं करना चाहिए।

क्वेरी चयनकर्ता विधियां

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

ऊपर दिए गए स्क्रीन शॉट्स में ध्यान दें, हमें वह तत्व प्राप्त हुआ है जो कक्षा या आईडी रखता है।

querySelectorAll() . का उपयोग करते समय एक और अंतर है एक HTML संग्रह के बजाय, हमें बदले में कुछ मिलता है जिसे नोड सूची कहा जाता है, जो एक सरणी जैसी वस्तु भी है।

HTML संग्रह और नोड सूची के बीच का अंतर यह है कि हम .forEach() . का उपयोग कर सकते हैं नोड सूची पर विधि। यदि हम DOM में हेरफेर करने का प्रयास कर रहे हैं तो हम HTML संग्रह के साथ ऐसा नहीं कर सकते। हालाँकि, जावास्क्रिप्ट में एक विधि है जिसका उपयोग हम HTML संग्रह या नोड सूची जैसी किसी सरणी जैसी वस्तु से एक सरणी बनाने के लिए कर सकते हैं। वह तरीका है .from() , और यह ऐरे वर्ग से है। Array.from(arrayLikeObject)

ध्यान दें कि हम क्वेरी चयनकर्ताओं के साथ सभी तत्वों का चयन कर सकते हैं जो हम getMethods() के साथ कर सकते हैं ।

निष्कर्ष

DOM एक शक्तिशाली इंटरफ़ेस है जो किसी वेबपेज के HTML का प्रतिनिधित्व करता है। इसमें एक वृक्ष संरचना है जिसे हम पृष्ठ का निरीक्षण करते समय देख सकते हैं। हम querySelector() . जैसी विधियों का उपयोग कर सकते हैं या getMethods ताकि हम जावास्क्रिप्ट के साथ जो देखते हैं उसमें हेरफेर कर सकें।