What is Document Object Model In Hindi

Event को हम कई प्रकार की स्थिति को कह सकते हैं जैसे page load हो रहा होता है यह एक event है उसी प्रकार  mouse click, mouse move, key press, closing window इत्यादि को कह सकते है जब कोई उपयोगकर्ता या फिर browser के द्वारा page पर कार्य किया जाता है तब html और java script के द्वारा  event के सहायता से handle किया जाता है।

          Web page developer की सहायता से event के लिए अपनी इच्छा के अनुसार ही कार्य निर्धारित करता है, जैसे कि बटन पर mouse ले जाने पर उसका रंग बदलना, आकर और स्थान का बदलना , एवं उस पर क्लिक करने से अन्य web-page का load हो जाना। इसमे सबसे common event, hyperlink पर जब mouse pointer ले जाया जाता है तो pointer के हाथ के रूप में बदल जाना होता है जिसके सहायता से उपयोगकर्ता के यह आभास हो जाता है कि इसपर click किया जा सकता है जिससे कुछ कार्य होगा।

JavaScript  के Document Object Model में event को निम्न प्रकार से परिभाषित किया गया है :

         जब उपयोगकर्ता की सहायता से input fiesds जैसे : text box, button, key इत्यादि पर कोई event जैसे : text टाइप करना, button पर क्लिक करना, keys को press करना या रेलेसे करना इत्यादि event करना है तब इस प्रकार के event का use कर सकते हैं। कुछ महत्वपूर्ण Input field event निम्न है :

1. onkeypress : जब उपयोगकर्ता द्वारा keyboard की सहायता से keys को दबाया जाता है इसी प्रकार onkeydown, onkeyup, इत्यादि event keyboard से संबंधित हो सकते हैं।
2. onsubmit/onreset : जब उपयोगकर्ता की सहायता से submit या reset button पर click किया जाता है।
3. onfocus/onchange/onblur : इस input event में सामान्य प्रकार के textbox, drop/down box इत्यादि प्रकार की स्थिति में apply किया जा सकता है इस प्रकार event जैसे कि input field से बाहर जाने पर उसका blur अर्थात धूंधलापन हो जाना या drop/down का मान का बदल जाना इत्यादि निर्धारित कर सकते हैं।

उपयोगकर्ता की सहायता से माउस से कोई activity जैसे click, mousemove, mouseover, इत्यादि किया जा सकता है तो इस प्रकार के स्थिति से event का निर्धारण कर सकते हैं। कुछ महत्वपूर्ण Mouse event निम्न है :

1.  onmousemove : जब उपयोगकर्ता के द्वारा mouse pointer को स्क्रीन में एक स्थान से दूसरे स्थान पर मूव करना है तो इस प्रकार के event का निर्धारण के लिए इस property का उपयोग कर सकते हैं।
2.  onmouseover : जब उपयोगकर्ता की सहायता से mouse pointer को किसी element के ऊपर ले जाया जाता है तो उस element पर क्या प्रभाव पड़ेगा इसका निर्धारण इस property की सहायता से कर सकते है।
3.  onclick/ondblclick : इस प्रकार का event mouse click एवं double click  आधारित होता है। इसमें property को बदल सकते है जब event में click या double click किया जाता है।

इसमे जब page load या upload की स्थिति में ही कोई एक्टिविटी निर्धारित कर सकते है। जैसे कि page के ब्राउज़र पर खुलते ही कोई कोई कार्य का हो जाना। इनमे कुछ महत्वपूर्ण निम्न है:

1. onload : जब page ब्राउज़र पर खुलता है इसमें चाहते हैं कि कोई event हो तो इस properties का निर्धारण किया जा सकता है।
2. onunload : जब ब्राउज़र में खुले हुए page को बंद किया जाता है तब कोई event हो इसके लिए इस property का निर्धारण कर सकते हैं।
3. onerror/onresize : अगर image को लोड करने में कोई error आता हो तो क्या event perform हो सकता है हाँ इसका निर्धारण उस स्थान पर कर सकते हैं, यदि ब्राउज़र window के आकार को यदि बदला जाता है तो onresize property का यूज़ किया जा सकता है।

यह एक प्रकार से HTML या XML के लिए प्रोग्रामिंग interface के रूप में होता है जो document browser पर प्रदर्शित हो रहे page को कहा जाता हैं। समान्यतः ब्राउज़र के page में html content ही प्रदर्शित हो रहे होते हैं। Document Object Model (DOM)  पर object oriented programming करके अगर मोडिफिकेशन करना चाहते हैं तो इसके लिए हमे JavaScript programming में कोडिंग करना होता है।

प्रत्येक web-page को एक प्रकार से document object माना जा सकता है जो ब्राउज़र के अंतर्गत प्रदर्शित किया जाता है। ब्राउज़र में प्रदर्शित document object को html document के रूप में प्रदर्शित किया जाता है। इसके अंतर्गत अनेक प्रकार के properties form, window  आदि आते है जो उसके रूप को बदलने का कार्य करते हैं। Document Object को बदलने के कार्य के लिये जिन properties का यूज़ किया जाता है उन्हें DOM (Document Object Model) के नाम से जाना जाता है इस प्रकार DOM को निम्न प्रकार hierarchy structure लागू कर सकते है:

इस object hierarchy को निम्न प्रकार से परिभाषित किया जा सकता है :

1.  Window object :  यह डॉक्यूमेंट ऑब्जेक्ट का parent होती है इसके अंतर्गत सभी ऑब्जेक्ट आते हैं।
2.  Document object : जब कोई ब्राउज़र पर pAge load होता है तो वह page, document object होती है इसे हम html document भी कह सकते है।
3.  Form object : जब कोई HTML document में जब <form>…..</form> में कोई content लिखा जाता है तो वह इस Form object का भाग होता है।
4. Form control object : जब हम Button, Radio, Textbox इत्यादि  components object को form control ऑब्जेक्ट कहा जाता है यह DOM (Document Object Model) को तैयार करने में काफी usefull होते हैं।

What is JavaScript Document Object Model and Event In Hindi