Document Object Model क्या है ?
Document Object Model ,W3C (World Wide Web) का एक स्टैंडर्ड है | यह किसी डॉक्यूमेंट को एक्सेस करने के लिए स्टैंडर्ड Define करता है| अन्य शब्दों में डॉक्यूमेंटऑब्जेक्ट मॉडल किसी डॉक्यूमेंट के Structure, Style तथा Content को Dynamically Access और Update करने के लिए Programs और Scripts के लिए प्लेटफार्म उपलब्ध कराता है |
जब कोई वेब पेज लोड होता है तो वेब ब्राउजर उस पेज का Document Object Model बना देता है | JavaScript Document Object Model (DOM) का सबसे बड़ी विशेषता यह है की इसकी मदद से हम HTML tags को Dynamically Access कर सकते हैं और जरूरत पड़ने पर उनमें परिवर्तन (Changes)भी कर सकते हैं ।
किसी HTML पेज को डायनामिक (Dynamic) बनाने के लिए Document Object Model में जावास्क्रिप्ट की महत्वपूर्ण भूमिका होती है क्योकि –
- Javascript webpage के सभी tags को access और change कर सकता है |
- Javascript webpage के सभी attributes को access और change कर सकता है |
- Javascript webpage के पुराने html elements जैसे – Tags , Attributes को remove कर सकता है |
- Javascript द्वारा webpage में नए tags और attributes को add किया जा सकता है।
- Javascript webpage की सभी CSS styles को change कर सकता है |
- Javascript द्वारा नए events create किये जा सकते है।
Document Object Model को हम एक Object tree के द्वारा समझ सकते हैं –
- Document मतलब Webpage |
- Object मतलब विभिन्न Elements जैसे Tags, attributes इत्यादि |
- Model मतलब बनावट या संरचना |
DOM Accessible Basic HTML Elements
कुछ बेसिक HTML Elements जिन्हें आप DOM के द्वारा हैंडल कर सकते है।
- Anchor
- Form
- Textbox
- Textarea
- Checkbox
- Radio
- Select
- Option
- Reset
- Button
- Link
एक ब्राउज़र सभी Tags को Nested list की तरह देखता है। जैसा की नीचे दी गयी लिस्ट में दिया गया है। HTML Tag Top पर होगा और बाकि Tags उसके Nested Order में होंगे।
HTML
——-HEAD
———–TITLE
—-BODY
————-P
————H1
————FORM
————TABLE
इन सभी Tags को Access करने के लिए आपको पहले उनके Parent Tags को Access करना होता है। Parent Tags को Node भी कहते है। इन Tags को Access करने के लिए आप Document Object को यूज़ करते है। जैसे की Form को Access करने के लिए आप Document.Form Statement यूज़ कर सकते है।
यदि आप Form में किसी Field की Value Access करना चाहते है तो उस Field का नाम लिखकर उसके आगे Dot Operator लगाकर Value लिख देंगे।जैसे की आप किसी Text-Box की Value Access करना चाहते है जिसका नाम firstname है तो ऐसा आप इस तरह कर सकते है।
var firstName = document.form.firstName.value;
JavaScript Document Object Model (DOM) का सबसे बड़ा फीचर यह है की इसकी मदद से आप सभी Tags को Dynamically Access कर सकते है और Situation के According उनमें Changes कर सकते है।
Functions of JavaScript DOM
getElementById(id)
ये Method एक Element Return करता है। इस मेथड में Id argument की तरह Pass की जाती है। वो Id जिस Element की होती है वो Element ये Method Return कर देता है।
getElementsByName(name)
आप बहुत से Name पास कर सकते है। ये Name जिन Elements से Match होते है वो Elements ये Method Return करता है।
getElementsByTagName(tagName)
एक Tag Name Pass किया जाता है। ये Method उस Tag के नाम वाले सभी Tags को Return करता है।
getElementsByClassName(className)
एक Class Name Pass किया जाता है। ये Method Class Name वाले सभी Tags Return करता है।