Document Object Model क्या है?

Document Object Model क्या है?

Table of content (TOC)

Document Object Model W3C (वर्ल्ड वाइड वेब) का एक मानक है। यह एक दस्तावेज़ तक पहुँचने के लिए मानक को परिभाषित करता है। दूसरे शब्दों में, DocumentObject मॉडल प्रोग्राम और स्क्रिप्ट को दस्तावेज़ की संरचना, शैली और सामग्री को गतिशील रूप से एक्सेस और अद्यतन करने के लिए एक मंच प्रदान करता है।

जब कोई वेब पेज लोड होता है, तो वेब ब्राउजर उस पेज का डॉक्यूमेंट ऑब्जेक्ट मॉडल बनाता है। JavaScript Document Object Model (DOM) की सबसे बड़ी विशेषता यह है कि इसकी मदद से हम HTML टैग्स को गतिशील रूप से एक्सेस कर सकते हैं और जरूरत पड़ने पर उनमें बदलाव भी कर सकते हैं।

HTML पृष्ठ को गतिशील बनाने के लिए, जावास्क्रिप्ट दस्तावेज़ ऑब्जेक्ट मॉडल में एक महत्वपूर्ण भूमिका निभाता है क्योंकि –

• जावास्क्रिप्ट वेबपेज के सभी टैग्स को एक्सेस और बदल सकता है।
• जावास्क्रिप्ट वेबपेज की सभी विशेषताओं को एक्सेस और बदल सकता है।
• जावास्क्रिप्ट पुराने html तत्वों जैसे टैग्स, एट्रीब्यूट्स को वेबपेज से हटा सकता है।
• जावास्क्रिप्ट द्वारा वेबपेज में नए टैग और विशेषताएँ जोड़ी जा सकती हैं।
• जावास्क्रिप्ट वेबपेज की सभी सीएसएस शैलियों को बदल सकता है।
• जावास्क्रिप्ट द्वारा नई घटनाएँ बनाई जा सकती हैं।

डॉक्यूमेंट ऑब्जेक्ट मॉडल को हम ऑब्जेक्ट ट्री के माध्यम से समझ सकते हैं –

• दस्तावेज़ का अर्थ है वेबपेज।
• ऑब्जेक्ट का अर्थ है विभिन्न तत्व जैसे टैग, विशेषताएँ आदि।
• मॉडल का अर्थ है बनावट या संरचना।

DOM Accessible Basic HTML Elements

कुछ बुनियादी HTML तत्व जिन्हें आप DOM के माध्यम से संभाल सकते हैं।

• Anchor
• Form
• Textbox
• Textarea
• Checkbox
• Radio
• Select
• Option
• Reset
• Button
• Link

एक ब्राउज़र सभी टैग्स को नेस्टेड सूची के रूप में मानता है। जैसा कि नीचे दी गई सूची में दिया गया है। HTML टैग सबसे ऊपर होगा और बाकी टैग अपने नेस्टेड क्रम में होंगे।

HTML
——-HEAD
———–TITLE
—-BODY
————-P
————H1
————FORM
————TABLE

इन सभी टैग्स को एक्सेस करने के लिए, आपको पहले उनके पैरेंट टैग्स को एक्सेस करना होगा। पैरेंट टैग को नोड भी कहा जाता है। इन टैग्स तक पहुँचने के लिए, आप दस्तावेज़ ऑब्जेक्ट का उपयोग करते हैं। उदाहरण के लिए, आप फ़ॉर्म तक पहुँचने के लिए Document.Form Statement का उपयोग कर सकते हैं।

अगर आप फॉर्म में किसी फील्ड की वैल्यू को एक्सेस करना चाहते हैं तो उस फील्ड का नाम लिखकर उसके सामने डॉट ऑपरेटर लगाकर वैल्यू लिखेंगे। जैसे कि आप किसी टेक्स्ट-बॉक्स की वैल्यू एक्सेस करना चाहते हैं जिसका नाम फर्स्टनाम है, तो आप इसे इस तरह कर सकते हैं। कर सकते हैं।

var firstName = document.form.firstName.value;

JavaScript Document Object Model (DOM) की सबसे बड़ी विशेषता यह है कि इसकी मदद से आप सभी टैग को डायनामिक रूप से एक्सेस कर सकते हैं और स्थिति के अनुसार परिवर्तन कर सकते हैं।

Functions of JavaScript DOM

getElementById(id)
यह विधि एक तत्व लौटाती है। इस पद्धति में Id को तर्क के रूप में पारित किया जाता है। जिस तत्व का वह आईडी है, वह तत्व इस विधि को लौटाता है।

getElementsByName(name)
आप कई नाम पास कर सकते हैं। जिन तत्वों से यह नाम मेल खाता है, यह विधि तत्वों को लौटाती है।

getElementsByTagName(tagName)
एक टैग नाम पारित किया गया है। यह विधि उस टैग के नाम के साथ सभी टैग लौटाती है।

getElementsByClassName(className)
एक वर्ग का नाम पारित किया गया है। यह विधि वर्ग के नाम के साथ सभी टैग लौटाती है।

Final Words

तो दोस्तों आपको हमारी पोस्ट कैसी लगी! शेयरिंग बटन पोस्ट के नीचे इसे अपने दोस्तों के साथ शेयर करना न भूलें। इसके अलावा अगर बीच में कोई परेशानी हो तो कमेंट बॉक्स में पूछने में संकोच न करें। आपकी सहायता कर हमें खुशी होगी। हम इससे जुड़े और भी पोस्ट लिखते रहेंगे। तो अपने मोबाइल या कंप्यूटर पर हमारे ब्लॉग "various info: Education and Tech" को बुकमार्क (Ctrl + D) करना न भूलें और अपने ईमेल में सभी पोस्ट प्राप्त करने के लिए हमें अभी सब्सक्राइब करें। 

अगर आपको यह पोस्ट अच्छी लगी हो तो इसे अपने दोस्तों के साथ शेयर करना ना भूलें। आप इसे व्हाट्सएप, फेसबुक या ट्विटर जैसी सोशल नेटवर्किंग साइटों पर साझा करके अधिक लोगों तक पहुंचने में हमारी सहायता कर सकते हैं। शुक्रिया!