Document Object Model क्या है?

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

जब कोई वेब पेज लोड होता है, तो वेब ब्राउजर उस पेज का डॉक्यूमेंट ऑब्जेक्ट मॉडल बनाता है। JavaScript Document Object Model (DOM) की सबसे बड़ी विशेषता यह है कि इसकी मदद से हम 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)
एक वर्ग का नाम पारित किया गया है। यह विधि वर्ग के नाम के साथ सभी टैग लौटाती है।