डॉक्यूमेंट ऑब्जेक्ट मॉडल: Difference between revisions

From Vigyanwiki
(Created page with "{{short description|Convention for representing and interacting with objects in HTML, XHTML and XML documents}} {{More footnotes|date=August 2010}} {{Infobox technology standa...")
 
No edit summary
Line 1: Line 1:
{{short description|Convention for representing and interacting with objects in HTML, XHTML and XML documents}}
{{short description|Convention for representing and interacting with objects in HTML, XHTML and XML documents}}
{{More footnotes|date=August 2010}}
{{Infobox technology standard
{{Infobox technology standard
| title            = Document Object Model (DOM)
| title            = डॉक्यूमेंट ऑब्जेक्ट मॉडल (DOM)
| image            = DOM-model.svg
| image            = DOM-model.svg
| caption          = Example of DOM hierarchy in an HTML document
| caption          = एचटीएमएल दस्तावेज़ में डीओएम पदानुक्रम का उदाहरण
| status            =  
| status            =  
| year_started      =  
| year_started      =  
| first_published  = {{Start date and age|1998|10|1}}
| first_published  = {{प्रारंभ तिथि और आयु|1998|10|1}}
| version          = DOM4<ref>All versioning refers to W3C DOM only.</ref>
| version          = डीओएम4<ref>सभी संस्करण केवल डब्ल्यू3सी डीओएम को संदर्भित करते हैं।</ref>
| version_date      = {{Start date and age|2015|11|19}}
| version_date      = {{प्रारंभ तिथि और उम्र|2015|11|19}}
| preview          =  
| preview          =  
| preview_date      =  
| preview_date      =  
| organization      = [[World Wide Web Consortium]], [[WHATWG]]
| organization      = [[वर्ल्ड वाइड वेब कंसोर्टियम]], [[व्हाटवग]]
| committee        =  
| committee        =  
| editors          =  
| editors          =  
Line 18: Line 17:
| base_standards    = [https://dom.spec.whatwg.org/ WHATWG DOM Living Standard]<br />[https://www.w3.org/TR/dom/ W3C DOM4]
| base_standards    = [https://dom.spec.whatwg.org/ WHATWG DOM Living Standard]<br />[https://www.w3.org/TR/dom/ W3C DOM4]
| related_standards =  
| related_standards =  
| abbreviation      = DOM
| abbreviation      = डीओएम
| domain            =  
| domain            =  
| license          =  
| license          =  
}}
}}
{{HTML}} दस्तावेज़ ऑब्जेक्ट मॉडल (DOM) एक [[क्रॉस-प्लेटफॉर्म]] और [[भाषा-स्वतंत्र विनिर्देश]] है। भाषा-स्वतंत्र इंटरफ़ेस जो एक [[XML]] या [[HTML]] दस्तावेज़ को [[पेड़ की संरचना]] के रूप में मानता है जिसमें प्रत्येक [[नोड (कंप्यूटर विज्ञान)]] एक [[वस्तु (कंप्यूटर विज्ञान)]] है जो एक भाग का प्रतिनिधित्व करता है। दस्तावेज़ का। DOM एक लॉजिकल ट्री वाले दस्तावेज़ का प्रतिनिधित्व करता है। पेड़ की प्रत्येक शाखा एक नोड में समाप्त होती है, और प्रत्येक नोड में ऑब्जेक्ट होते हैं। DOM विधियाँ पेड़ तक प्रोग्रामेटिक पहुँच की अनुमति देती हैं; उनके साथ कोई दस्तावेज़ की संरचना, शैली या सामग्री को बदल सकता है।<ref>{{Cite web |title=Document Object Model (DOM): definition, structure and example |url=https://www.ionos.com/digitalguide/websites/web-development/an-introduction-to-the-document-object-model-dom/ |access-date=2022-04-21 |website=IONOS Digitalguide |language=en}}</ref> नोड्स में [[आयोजन प्रबंधकर्ता]] जुड़े हो सकते हैं। एक बार एक घटना शुरू हो जाने के बाद, ईवेंट हैंडलर निष्पादित हो जाते हैं।<ref name="Introduction">{{cite web
 
डॉक्यूमेंट ऑब्जेक्ट मॉडल (डीओएम) एक [[क्रॉस-प्लेटफॉर्म]] और [[भाषा-स्वतंत्र विनिर्देश|लैंग्वेज-इंडिपेंडेंट इंटरफ़ेस]] है। लैंग्वेज-इंडिपेंडेंट इंटरफ़ेस जो एक [[XML|एक्सएमएल]] या [[HTML|एचटीएमएल]] डॉक्यूमेंट को [[पेड़ की संरचना|ट्री की संरचना]] के रूप में मानता है जिसमें प्रत्येक [[नोड (कंप्यूटर विज्ञान)]] एक [[वस्तु (कंप्यूटर विज्ञान)]] है जो किसी निश्चित भाग का प्रतिनिधित्व करता है। डॉक्यूमेंट का डीओएम एक लॉजिकल ट्री वाले डॉक्यूमेंट का प्रतिनिधित्व करता है। ट्री की प्रत्येक शाखा एक नोड में समाप्त होती है, और प्रत्येक नोड में ऑब्जेक्ट होते हैं। डीओएम विधियाँ ट्री तक प्रोग्रामेटिक पहुँच की अनुमति देती हैं; उनके साथ कोई डॉक्यूमेंट की संरचना, शैली या सामग्री को परिवर्तित किया जा सकता है।<ref>{{Cite web |title=Document Object Model (DOM): definition, structure and example |url=https://www.ionos.com/digitalguide/websites/web-development/an-introduction-to-the-document-object-model-dom/ |access-date=2022-04-21 |website=IONOS Digitalguide |language=en}}</ref> नोड्स में [[आयोजन प्रबंधकर्ता]] जुड़े हो सकते हैं। एक बार घटना प्रारम्भ हो जाने के बाद, ईवेंट हैंडलर निष्पादित हो जाते हैं।<ref name="Introduction">{{cite web
| access-date = 2012-01-12
| access-date = 2012-01-12
| publisher = W3C  
| publisher = W3C  
Line 28: Line 28:
| quote = The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents.  
| quote = The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents.  
| url = http://www.w3.org/DOM/#what}}</ref>
| url = http://www.w3.org/DOM/#what}}</ref>
DOM का प्रमुख मानकीकरण [[विश्वव्यापी वेब संकाय]] (W3C) द्वारा नियंत्रित किया गया था, जिसने आखिरी बार 2004 में एक सिफारिश विकसित की थी। [[WHATWG]] ने मानक के विकास का जिम्मा लिया, इसे एक [[जीवित दस्तावेज़]] के रूप में प्रकाशित किया। W3C अब WHATWG मानक के स्थिर स्नैपशॉट प्रकाशित करता है।


HTML DOM (दस्तावेज़ ऑब्जेक्ट मॉडल) में, प्रत्येक तत्व एक नोड है:<ref>[https://www.w3schools.com/js/js_htmldom.asp]</ref>
डीओएम का प्रमुख मानकीकरण [[विश्वव्यापी वेब संकाय]] (डब्ल्यू3सी) द्वारा नियंत्रित किया गया था, जिसने आखिरी बार 2004 में एक अनुज्ञप्ति विकसित की थी। [[WHATWG|व्हातवग]] ने मानक के विकास की जिम्मेदारी ली, इसे एक [[जीवित दस्तावेज़|जीवित डॉक्यूमेंट]] के रूप में प्रकाशित किया। डब्ल्यू3सी अब व्हातवग मानक के स्थिर स्नैपशॉट प्रकाशित करता है।
* एक दस्तावेज़ एक दस्तावेज़ नोड है।
 
* सभी HTML तत्व तत्व नोड हैं।
एचटीएमएल डीओएम (डॉक्यूमेंट ऑब्जेक्ट मॉडल) में, प्रत्येक तत्व एक नोड है:<ref>[https://www.w3schools.com/js/js_htmldom.asp]</ref>
* सभी HTML विशेषताएँ विशेषता नोड हैं।
* प्रत्येक डॉक्यूमेंट एक डॉक्यूमेंट नोड है।
* HTML तत्वों में डाला गया टेक्स्ट टेक्स्ट नोड है।
* सभी एचटीएमएल तत्व नोड हैं।
* टिप्पणियाँ टिप्पणी नोड हैं।
* सभी एचटीएमएल विशेषताएँ नोड हैं।
* एचटीएमएल तत्वों में डाला गया टेक्स्ट नोड है।
* टिप्पणियाँ नोड हैं।


== इतिहास ==
== इतिहास ==
दस्तावेज़ ऑब्जेक्ट मॉडल का इतिहास 1990 के दशक के अंत में [[नेटस्केप नेविगेटर]] और [[[[माइक्रोसॉफ्ट]] अंतर्जाल अन्वेषक]] के साथ-साथ [[जावास्क्रिप्ट]] और [[जेस्क्रिप्ट]] के बीच [[ब्राउज़र युद्ध]]ों के इतिहास के साथ जुड़ा हुआ है, [[जावास्क्रिप्ट इंजन]]ों में व्यापक रूप से लागू होने वाली पहली स्क्रिप्टिंग भाषाएं [[वेब ब्राउज़र]]ों की।
डॉक्यूमेंट ऑब्जेक्ट मॉडल का इतिहास 1990 के दशक के अंत में [[नेटस्केप नेविगेटर]] और [[[[माइक्रोसॉफ्ट]] अंतर्जाल अन्वेषक]] के साथ-साथ [[जावास्क्रिप्ट]] और [[जेस्क्रिप्ट]] के बीच [[ब्राउज़र युद्ध]] के इतिहास के साथ जुड़ा हुआ है, [[जावास्क्रिप्ट इंजन]] में व्यापक रूप से लागू होने वाली पहली स्क्रिप्टिंग लैंग्वेजएं [[वेब ब्राउज़र]] की लैंग्वेज थी।


जावास्क्रिप्ट को [[नेटस्केप संचार]] द्वारा 1995 में नेटस्केप नेविगेटर 2.0 के भीतर जारी किया गया था। नेटस्केप के प्रतियोगी, माइक्रोसॉफ्ट ने अगले वर्ष इंटरनेट एक्सप्लोरर 3|इंटरनेट एक्सप्लोरर 3.0 जारी किया, जिसमें जेस्क्रिप्ट नामक जावास्क्रिप्ट का पुन: कार्यान्वयन किया गया। जावास्क्रिप्ट और जेस्क्रिप्ट [[वेब डेवलपर]]्स को [[ग्राहक की ओर]] इंटरएक्टिविटी के साथ वेब पेज बनाने देते हैं। इन भाषाओं की पहली पीढ़ी में उपयोगकर्ता-जनित ईवेंट (कंप्यूटिंग) का पता लगाने और HTML दस्तावेज़ को संशोधित करने की सीमित सुविधाओं को अंततः DOM स्तर 0 या लीगेसी DOM के रूप में जाना जाने लगा। DOM स्तर 0 के लिए कोई स्वतंत्र मानक विकसित नहीं किया गया था, लेकिन इसे [[HTML4]] के विनिर्देशों में आंशिक रूप से वर्णित किया गया था।
जावास्क्रिप्ट को [[नेटस्केप संचार]] द्वारा 1995 में नेटस्केप नेविगेटर 2.0 के भीतर जारी किया गया था। नेटस्केप के प्रतियोगी, माइक्रोसॉफ्ट ने अगले वर्ष इंटरनेट एक्सप्लोरर 3.0 जारी किया, जिसमें जेस्क्रिप्ट नामक जावास्क्रिप्ट का पुन: कार्यान्वयन किया गया। जावास्क्रिप्ट और जेस्क्रिप्ट [[वेब डेवलपर]] को [[ग्राहक की ओर]] इंटरएक्टिविटी के साथ वेब पेज बनाने देते हैं। इन लैंग्वेजओं की पहली पीढ़ी में उपयोगकर्ता-जनित ईवेंट (कंप्यूटिंग) का पता लगाने और एचटीएमएल डॉक्यूमेंट को संशोधित करने की सीमित सुविधाओं को अंततः डीओएम स्तर 0 या लीगेसी डीओएम के रूप में जाना जाने लगा। डीओएम स्तर 0 के लिए कोई इंडिपेंडेंट मानक विकसित नहीं किया गया था, लेकिन इसे [[HTML4|एचटीएमएल4]] के इंटरफ़ेसों में आंशिक रूप से वर्णित किया गया था।


लीगेसी डोम उन HTML तत्वों के प्रकारों में सीमित था जिन्हें एक्सेस किया जा सकता था। [[प्रपत्र (वेब)]], [[हाइपरलिंक]] और छवि तत्वों को एक श्रेणीबद्ध नाम से संदर्भित किया जा सकता है जो मूल दस्तावेज़ वस्तु से शुरू होता है। एक पदानुक्रमित नाम ट्रैवर्स किए गए तत्वों के नाम या अनुक्रमिक अनुक्रमणिका का उपयोग कर सकता है। उदाहरण के लिए, एक [[पाठ बॉक्स]] को या तो एक्सेस किया जा सकता है <code>document.formName.inputName</code> या <code>document.forms[0].elements[0]</code>.
लीगेसी डोम उन एचटीएमएल तत्वों के प्रकारों में सीमित था जिन्हें एक्सेस किया जा सकता था। [[प्रपत्र (वेब)]], [[हाइपरलिंक]] और छवि तत्वों को एक श्रेणीबद्ध नाम से संदर्भित किया जा सकता है जो मूल डॉक्यूमेंट वस्तु से प्रारम्भ होता है। एक पदानुक्रमित नाम ट्रैवर्स किए गए तत्वों के नाम या अनुक्रमिक अनुक्रमणिका का उपयोग कर सकता है। उदाहरण के लिए, एक [[पाठ बॉक्स]] को या तो एक्सेस किया जा सकता है <code>document.formName.inputName</code> या <code>document.forms[0].elements[0]</code>.


लीगेसी डोम सक्षम क्लाइंट-साइड फॉर्म सत्यापन और सरल इंटरफ़ेस अन्तरक्रियाशीलता जैसे [[टूलटिप]]्स बनाना।
लीगेसी डोम सक्षम क्लाइंट-साइड फॉर्म सत्यापन और सरल इंटरफ़ेस अन्तरक्रियाशीलता जैसे [[टूलटिप]] बनाना।


1997 में, नेटस्केप और माइक्रोसॉफ्ट ने क्रमशः नेटस्केप नेविगेटर और इंटरनेट एक्सप्लोरर का संस्करण 4.0 जारी किया, [[गतिशील एचटीएमएल]] (डीएचटीएमएल) कार्यक्षमता के लिए समर्थन जोड़कर एक लोड किए गए एचटीएमएल दस्तावेज़ में परिवर्तन को सक्षम किया। डीएचटीएम को प्राथमिक दस्तावेज़ ऑब्जेक्ट के लिए एक्सटेंशन की आवश्यकता होती है जो लीगेसी डीओएम कार्यान्वयन में उपलब्ध था। हालांकि जेस्क्रिप्ट जावास्क्रिप्ट पर आधारित होने के कारण लीगेसी डोम कार्यान्वयन काफी हद तक संगत थे, डीएचटीएमएल डोम एक्सटेंशन प्रत्येक ब्राउज़र निर्माता द्वारा समानांतर में विकसित किए गए थे और असंगत बने रहे। DOM के इन संस्करणों को इंटरमीडिएट DOM के रूप में जाना जाने लगा।
1997 में, नेटस्केप और माइक्रोसॉफ्ट ने क्रमशः नेटस्केप नेविगेटर और इंटरनेट एक्सप्लोरर का संस्करण 4.0 जारी किया, [[गतिशील एचटीएमएल]] (डीएचटीएमएल) कार्यक्षमता के लिए समर्थन जोड़कर एक लोड किए गए एचटीएमएल डॉक्यूमेंट में परिवर्तन को सक्षम किया। डीएचटीएम को प्राथमिक डॉक्यूमेंट ऑब्जेक्ट के लिए एक्सटेंशन की आवश्यकता होती है जो लीगेसी डीओएम कार्यान्वयन में उपलब्ध था। हालांकि जेस्क्रिप्ट जावास्क्रिप्ट पर आधारित होने के कारण लीगेसी डोम कार्यान्वयन काफी हद तक संगत थे, डीएचटीएमएल डोम एक्सटेंशन प्रत्येक ब्राउज़र निर्माता द्वारा समानांतर में विकसित किए गए थे और असंगत बने रहे। डीओएम के इन संस्करणों को इंटरमीडिएट डीओएम के रूप में जाना जाने लगा।


[[ECMAScript]] के मानकीकरण के बाद, वर्ल्ड वाइड वेब कंसोर्टियम DOM वर्किंग ग्रुप ने एक मानक DOM विनिर्देशन का मसौदा तैयार करना शुरू किया। पूर्ण विनिर्देश, जिसे DOM स्तर 1 के रूप में जाना जाता है, 1998 के अंत में W3C अनुशंसा बन गया। 2005 तक, W3C DOM के बड़े हिस्से सामान्य ECMAScript-सक्षम ब्राउज़रों द्वारा अच्छी तरह से समर्थित थे, जिनमें [[Internet Explorer 6]] (2001 से), [[ओपेरा (वेब ​​ब्राउज़र)]] शामिल थे। ), सफारी (वेब ​​ब्राउज़र) और गेको (लेआउट इंजन)-आधारित ब्राउज़र (जैसे [[मोज़िला एप्लीकेशन सूट]], [[मोज़िला फ़ायरफ़ॉक्स]], [[समुद्री बन्दर]] और [[कैमिनो (वेब ​​ब्राउज़र)]])।
[[ECMAScript|ईसीएमए स्क्रिप्ट]] के मानकीकरण के बाद, वर्ल्ड वाइड वेब कंसोर्टियम डीओएम वर्किंग ग्रुप ने एक मानक डीओएम इंटरफ़ेसन का प्रारूप तैयार करना प्रारम्भ किया। पूर्ण इंटरफ़ेस, जिसे डीओएम स्तर 1 के रूप में जाना जाता है, 1998 के अंत में डब्ल्यू3सी अनुशंसा बन गया। 2005 तक, डब्ल्यू3सी डीओएम के बड़े हिस्से सामान्य ईसीएमए स्क्रिप्ट-सक्षम ब्राउज़रों द्वारा '''अच्छी तरह से समर्थित थे''', जिनमें [[Internet Explorer 6]] (2001 से), [[ओपेरा (वेब ​​ब्राउज़र)]] सम्मिलित थे।) सफारी (वेब ​​ब्राउज़र) और गेको (लेआउट इंजन)-आधारित ब्राउज़र (जैसे [[मोज़िला एप्लीकेशन सूट]], [[मोज़िला फ़ायरफ़ॉक्स]], [[समुद्री बन्दर]] और [[कैमिनो (वेब ​​ब्राउज़र)]])।


== मानक ==
== मानक ==
[[File:WHATWG DOM.png|thumb|व्हाटवग डोम]][[W3C]] DOM वर्किंग ग्रुप ने अपनी अंतिम सिफारिश प्रकाशित की और बाद में 2004 में भंग कर दिया। विकास के प्रयास WHATWG में चले गए, जो एक जीवन स्तर को बनाए रखना जारी रखता है।<ref>{{cite web|url=https://dom.spec.whatwg.org/|title=DOM Standard|access-date=23 September 2016}}</ref> 2009 में, वेब एप्लिकेशन समूह ने W3C में DOM गतिविधियों को पुनर्गठित किया।<ref>{{cite web|url=https://www.w3.org/DOM/|title=W3C Document Object Model|access-date=23 September 2016}}</ref> 2013 में, प्रगति की कमी और [[आप ऊब जाएंगे]] 5 की आसन्न रिलीज के कारण, डीओएम लेवल 4 विनिर्देश को [[एचटीएमएल वर्किंग ग्रुप]] को पूरा करने में तेजी लाने के लिए पुन: असाइन किया गया था।<ref>{{cite web|url=https://lists.w3.org/Archives/Public/public-html-admin/2013Sep/0129.html|title=New Charter for the HTML Working Group from Philippe Le Hegaret on 2013-09-30 (public-html-admin@w3.org from September 2013)|first=Philippe Le Hegaret|last=(plh@w3.org)|access-date=23 September 2016}}</ref> इस बीच, 2015 में, वेब एप्लिकेशन समूह को भंग कर दिया गया और DOM स्टीवर्डशिप वेब प्लेटफ़ॉर्म समूह को दे दी गई।<ref>{{cite web|url=https://www.w3.org/2008/webapps/wiki/PubStatus|title=PubStatus - WEBAPPS|access-date=23 September 2016}}</ref> 2015 में DOM स्तर 4 के प्रकाशन के साथ शुरुआत करते हुए, W3C WHATWG मानक के स्नैपशॉट के आधार पर नई अनुशंसाएँ बनाता है।
[[File:WHATWG DOM.png|thumb|व्हाटवग डोम]][[W3C|डब्ल्यू3सी]] डीओएम वर्किंग ग्रुप ने अपनी अंतिम अनुज्ञप्ति प्रकाशित की और बाद में 2004 में भंग कर दिया। विकास के प्रयास व्हातवग में चले गए, जो एक जीवन स्तर को बनाए रखना जारी रखता है।<ref>{{cite web|url=https://dom.spec.whatwg.org/|title=DOM Standard|access-date=23 September 2016}}</ref> 2009 में, वेब एप्लिकेशन समूह ने डब्ल्यू3सी में डीओएम गतिविधियों को पुनर्गठित किया।<ref>{{cite web|url=https://www.w3.org/DOM/|title=W3C Document Object Model|access-date=23 September 2016}}</ref> 2013 में, प्रगति की कमी और [[आप ऊब जाएंगे]] 5 की आसन्न रिलीज के कारण, डीओएम लेवल 4 इंटरफ़ेस को [[एचटीएमएल वर्किंग ग्रुप]] को पूरा करने में तेजी लाने के लिए पुन: असाइन किया गया था।<ref>{{cite web|url=https://lists.w3.org/Archives/Public/public-html-admin/2013Sep/0129.html|title=New Charter for the HTML Working Group from Philippe Le Hegaret on 2013-09-30 (public-html-admin@w3.org from September 2013)|first=Philippe Le Hegaret|last=(plh@w3.org)|access-date=23 September 2016}}</ref> इस बीच, 2015 में, वेब एप्लिकेशन समूह को भंग कर दिया गया और डीओएम स्टीवर्डशिप वेब प्लेटफ़ॉर्म समूह को दे दी गई।<ref>{{cite web|url=https://www.w3.org/2008/webapps/wiki/PubStatus|title=PubStatus - WEBAPPS|access-date=23 September 2016}}</ref> 2015 में डीओएम स्तर 4 के प्रकाशन के साथ शुरुआत करते हुए, डब्ल्यू3सी व्हातवग मानक के स्नैपशॉट के आधार पर नई अनुशंसाएँ बनाता है।


* DOM स्तर 1 संपूर्ण HTML या XML दस्तावेज़ के लिए एक पूर्ण मॉडल प्रदान करता है, जिसमें दस्तावेज़ के किसी भी हिस्से को बदलने का साधन शामिल है।
* डीओएम स्तर 1 संपूर्ण एचटीएमएल या एक्सएमएल डॉक्यूमेंट के लिए एक पूर्ण मॉडल प्रदान करता है, जिसमें डॉक्यूमेंट के किसी भी हिस्से को बदलने का साधन सम्मिलित है।
* DOM लेवल 2 को 2000 के अंत में प्रकाशित किया गया था <code>getElementById</code> फ़ंक्शन के साथ-साथ DOM ईवेंट और XML नामस्थान और CSS के लिए समर्थन।
* डीओएम लेवल 2 को 2000 के अंत में प्रकाशित किया गया था <code>getElementById</code> फ़ंक्शन के साथ-साथ डीओएम ईवेंट और एक्सएमएल नामस्थान और CSS के लिए समर्थन।
* DOM लेवल 3, अप्रैल 2004 में प्रकाशित, [[XPath]] और कीबोर्ड [[घटना से निपटना]] के लिए समर्थन जोड़ा गया, साथ ही XML के रूप में क्रमांकन दस्तावेज़ों के लिए एक इंटरफ़ेस।
* डीओएम लेवल 3, अप्रैल 2004 में प्रकाशित, [[XPath]] और कीबोर्ड [[घटना से निपटना]] के लिए समर्थन जोड़ा गया, साथ ही एक्सएमएल के रूप में क्रमांकन डॉक्यूमेंटों के लिए एक इंटरफ़ेस।
* DOM Level 4 को 2015 में प्रकाशित किया गया था। यह WHATWG जीवन स्तर का एक स्नैपशॉट है।<ref>{{cite web|url=https://dom.spec.whatwg.org/|title=W3C DOM4|access-date=8 January 2021}}</ref>
* डीओएम Level 4 को 2015 में प्रकाशित किया गया था। यह व्हातवग जीवन स्तर का एक स्नैपशॉट है।<ref>{{cite web|url=https://dom.spec.whatwg.org/|title=W3C DOM4|access-date=8 January 2021}}</ref>




Line 62: Line 63:


=== वेब ब्राउजर ===
=== वेब ब्राउजर ===
[[वेब ब्राउज़र इंजन]] के लिए एक HTML पेज जैसे दस्तावेज़, अधिकांश वेब ब्राउज़र DOM के समान एक आंतरिक मॉडल का उपयोग करते हैं। प्रत्येक दस्तावेज़ के नोड्स को ट्री स्ट्रक्चर में व्यवस्थित किया जाता है, जिसे 'DOM ट्री' कहा जाता है, जिसमें सबसे ऊपरी नोड को डॉक्यूमेंट ऑब्जेक्ट नाम दिया जाता है। जब एक HTML पृष्ठ ब्राउज़रों में प्रस्तुत किया जाता है, तो ब्राउज़र HTML को स्थानीय मेमोरी में डाउनलोड करता है और स्क्रीन पर पृष्ठ प्रदर्शित करने के लिए स्वचालित रूप से इसे पार्स करता है। हालाँकि, DOM को एक पेड़ के रूप में प्रस्तुत करने की आवश्यकता नहीं है,<ref name="Level3-Introduction">{{cite web|url=https://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/introduction.html|title=What is the Document Object Model?|access-date=2021-09-12|publisher=W3C|quote=However, the DOM does not specify that documents must be implemented as a tree or a grove, nor does it specify how the relationships among objects be implemented. The DOM is a logical model that may be implemented in any convenient manner.}}</ref> और कुछ ब्राउज़रों ने अन्य आंतरिक मॉडलों का उपयोग किया है।<ref name="Modernizing-Dom">{{cite web|url=https://blogs.windows.com/msedgedev/2017/04/19/modernizing-dom-tree-microsoft-edge/|title=Modernizing the DOM tree in Microsoft Edge|date=19 April 2017|access-date=2021-09-12|publisher=Microsoft}}</ref>
[[वेब ब्राउज़र इंजन]] के लिए एक एचटीएमएल पेज जैसे डॉक्यूमेंट, अधिकांश वेब ब्राउज़र डीओएम के समान एक आंतरिक मॉडल का उपयोग करते हैं। प्रत्येक डॉक्यूमेंट के नोड्स को ट्री स्ट्रक्चर में व्यवस्थित किया जाता है, जिसे 'डीओएम ट्री' कहा जाता है, जिसमें सबसे ऊपरी नोड को डॉक्यूमेंट ऑब्जेक्ट नाम दिया जाता है। जब एक एचटीएमएल पृष्ठ ब्राउज़रों में प्रस्तुत किया जाता है, तो ब्राउज़र एचटीएमएल को स्थानीय मेमोरी में डाउनलोड करता है और स्क्रीन पर पृष्ठ प्रदर्शित करने के लिए स्वचालित रूप से इसे पार्स करता है। हालाँकि, डीओएम को एक ट्री के रूप में प्रस्तुत करने की आवश्यकता नहीं है,<ref name="Level3-Introduction">{{cite web|url=https://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/introduction.html|title=What is the Document Object Model?|access-date=2021-09-12|publisher=W3C|quote=However, the DOM does not specify that documents must be implemented as a tree or a grove, nor does it specify how the relationships among objects be implemented. The DOM is a logical model that may be implemented in any convenient manner.}}</ref> और कुछ ब्राउज़रों ने अन्य आंतरिक मॉडलों का उपयोग किया है।<ref name="Modernizing-Dom">{{cite web|url=https://blogs.windows.com/msedgedev/2017/04/19/modernizing-dom-tree-microsoft-edge/|title=Modernizing the DOM tree in Microsoft Edge|date=19 April 2017|access-date=2021-09-12|publisher=Microsoft}}</ref>




=== जावास्क्रिप्ट ===
=== जावास्क्रिप्ट ===
जब कोई वेब पेज लोड होता है, तो ब्राउजर पेज का एक डॉक्यूमेंट ऑब्जेक्ट मॉडल बनाता है, जो एक HTML डॉक्यूमेंट का ऑब्जेक्ट ओरिएंटेड प्रतिनिधित्व होता है जो जावास्क्रिप्ट और खुद डॉक्यूमेंट के बीच एक इंटरफेस के रूप में कार्य करता है। यह गतिशील वेब पृष्ठों के निर्माण की अनुमति देता है,<ref>{{cite web|url=https://www.w3schools.com/js/js_htmldom.asp|title=JavaScript HTML DOM|access-date=23 September 2016}}</ref> क्योंकि एक पृष्ठ के भीतर जावास्क्रिप्ट कर सकता है:
जब कोई वेब पेज लोड होता है, तो ब्राउजर पेज का एक डॉक्यूमेंट ऑब्जेक्ट मॉडल बनाता है, जो एक एचटीएमएल डॉक्यूमेंट का ऑब्जेक्ट ओरिएंटेड प्रतिनिधित्व होता है जो जावास्क्रिप्ट और खुद डॉक्यूमेंट के बीच एक इंटरफेस के रूप में कार्य करता है। यह गतिशील वेब पृष्ठों के निर्माण की अनुमति देता है,<ref>{{cite web|url=https://www.w3schools.com/js/js_htmldom.asp|title=JavaScript HTML DOM|access-date=23 September 2016}}</ref> क्योंकि एक पृष्ठ के भीतर जावास्क्रिप्ट कर सकता है:


* किसी भी HTML तत्व और विशेषताओं को जोड़ें, बदलें और हटाएं
* किसी भी एचटीएमएल तत्व और विशेषताओं को जोड़ें, बदलें और हटाएं
* किसी भी CSS स्टाइल को बदलें
* किसी भी CSS स्टाइल को बदलें
* सभी मौजूदा घटनाओं पर प्रतिक्रिया करें
* सभी मौजूदा घटनाओं पर प्रतिक्रिया करें
Line 74: Line 75:


== डोम वृक्ष संरचना ==
== डोम वृक्ष संरचना ==
डॉक्यूमेंट ऑब्जेक्ट मॉडल (DOM) ट्री एक HTML या XML दस्तावेज़ का एक पदानुक्रमित प्रतिनिधित्व है। इसमें रूट नोड होता है, जो दस्तावेज़ ही होता है, और बाल नोड्स की एक श्रृंखला होती है जो दस्तावेज़ के तत्वों, विशेषताओं और टेक्स्ट सामग्री का प्रतिनिधित्व करती है। ट्री में प्रत्येक नोड में रूट नोड को छोड़कर एक पैरेंट नोड होता है, और इसमें कई चाइल्ड नोड हो सकते हैं।
डॉक्यूमेंट ऑब्जेक्ट मॉडल (डीओएम) ट्री एक एचटीएमएल या एक्सएमएल डॉक्यूमेंट का एक पदानुक्रमित प्रतिनिधित्व है। इसमें रूट नोड होता है, जो डॉक्यूमेंट ही होता है, और बाल नोड्स की एक श्रृंखला होती है जो डॉक्यूमेंट के तत्वों, विशेषताओं और टेक्स्ट सामग्री का प्रतिनिधित्व करती है। ट्री में प्रत्येक नोड में रूट नोड को छोड़कर एक पैरेंट नोड होता है, और इसमें कई चाइल्ड नोड हो सकते हैं।


=== नोड्स === के रूप में तत्व
=== नोड्स === के रूप में तत्व
HTML या XML दस्तावेज़ में तत्वों को DOM ट्री में नोड्स के रूप में दर्शाया जाता है। प्रत्येक तत्व नोड में एक टैग नाम, विशेषताएँ होती हैं, और इसमें अन्य तत्व नोड या बच्चों के रूप में टेक्स्ट नोड हो सकते हैं। उदाहरण के लिए, निम्न संरचना वाला HTML दस्तावेज़:<syntaxhighlight lang= html >
एचटीएमएल या एक्सएमएल डॉक्यूमेंट में तत्वों को डीओएम ट्री में नोड्स के रूप में दर्शाया जाता है। प्रत्येक तत्व नोड में एक टैग नाम, विशेषताएँ होती हैं, और इसमें अन्य तत्व नोड या बच्चों के रूप में टेक्स्ट नोड हो सकते हैं। उदाहरण के लिए, निम्न संरचना वाला एचटीएमएल डॉक्यूमेंट:<syntaxhighlight lang= html >
<एचटीएमएल>
<एचटीएमएल>
   <सिर>
   <सिर>
Line 87: Line 88:
   </शरीर>
   </शरीर>
</html>
</html>
</syntaxhighlight>DOM ट्री में इस रूप में दर्शाया जाएगा:<syntaxhighlight lang= text>
</syntaxhighlight>डीओएम ट्री में इस रूप में दर्शाया जाएगा:<syntaxhighlight lang= text>
- दस्तावेज़ (रूट)
- दस्तावेज़ (रूट)
   - एचटीएमएल
   - एचटीएमएल
Line 107: Line 108:
किसी तत्व के गुणों को DOM ट्री में तत्व नोड के गुणों के रूप में दर्शाया जाता है। उदाहरण के लिए, निम्न HTML वाला एक तत्व:<syntaxhighlight lang= html >
किसी तत्व के गुणों को DOM ट्री में तत्व नोड के गुणों के रूप में दर्शाया जाता है। उदाहरण के लिए, निम्न HTML वाला एक तत्व:<syntaxhighlight lang= html >
<a href= https://example.com>लिंक</a>
<a href= https://example.com>लिंक</a>
</syntaxhighlight>DOM ट्री में इस रूप में दर्शाया जाएगा:<syntaxhighlight lang= text>
</syntaxhighlight>डीओएम ट्री में इस रूप में दर्शाया जाएगा:<syntaxhighlight lang= text>
- ए
- ए
   - href: https://example.com
   - href: https://example.com
Line 125: Line 126:
root.appendChild (बच्चा);
root.appendChild (बच्चा);


</syntaxhighlight>DOM संरचना बनाने का एक अन्य तरीका HTML कोड को एक स्ट्रिंग के रूप में सम्मिलित करने के लिए innerHTML गुण का उपयोग करना है, जिससे प्रक्रिया में तत्व और बच्चे बनते हैं। उदाहरण के लिए: <वाक्यविन्यास लैंग = जावास्क्रिप्ट>
</syntaxhighlight>डीओएम संरचना बनाने का एक अन्य तरीका एचटीएमएल कोड को एक स्ट्रिंग के रूप में सम्मिलित करने के लिए innerएचटीएमएल गुण का उपयोग करना है, जिससे प्रक्रिया में तत्व और बच्चे बनते हैं। उदाहरण के लिए: <वाक्यविन्यास लैंग = जावास्क्रिप्ट>
document.getElementById (रूट) .आंतरिक HTML = <child></child>;
document.getElementById (रूट) .आंतरिक एचटीएमएल = <child></child>;
</syntaxhighlight>एक अन्य विधि जावास्क्रिप्ट लाइब्रेरी या फ्रेमवर्क जैसे कि [[jQuery]], [[AngularJS]], React (जावास्क्रिप्ट लाइब्रेरी), Vue.js, आदि का उपयोग करना है। ये लाइब्रेरी DOM बनाने, हेरफेर करने और बातचीत करने के लिए एक अधिक सुविधाजनक और कुशल तरीका प्रदान करती हैं। .
<nowiki></syntaxhighlight></nowiki>एक अन्य विधि जावास्क्रिप्ट लाइब्रेरी या फ्रेमवर्क जैसे कि [[jQuery]], [[AngularJS]], React (जावास्क्रिप्ट लाइब्रेरी), Vue.js, आदि का उपयोग करना है। ये लाइब्रेरी डीओएम बनाने, हेरफेर करने और बातचीत करने के लिए एक अधिक सुविधाजनक और कुशल तरीका प्रदान करती हैं। .


डेटा को पार्स करने और उसके अनुसार नोड्स बनाने के लिए जावास्क्रिप्ट विधियों का उपयोग करके XML या JSON डेटा से DOM संरचना बनाना भी संभव है।
डेटा को पार्स करने और उसके अनुसार नोड्स बनाने के लिए जावास्क्रिप्ट विधियों का उपयोग करके एक्सएमएल या JSON डेटा से डीओएम संरचना बनाना भी संभव है।


यह ध्यान रखना महत्वपूर्ण है कि एक डोम संरचना बनाने का मतलब यह नहीं है कि यह वेब पेज में प्रदर्शित होगा, यह केवल स्मृति में मौजूद है और इसे दस्तावेज़ निकाय या एक विशिष्ट कंटेनर में प्रस्तुत किया जाना चाहिए।
यह ध्यान रखना महत्वपूर्ण है कि एक डोम संरचना बनाने का मतलब यह नहीं है कि यह वेब पेज में प्रदर्शित होगा, यह केवल स्मृति में मौजूद है और इसे डॉक्यूमेंट निकाय या एक विशिष्ट कंटेनर में प्रस्तुत किया जाना चाहिए।


संक्षेप में, एक DOM संरचना बनाने में अलग-अलग नोड्स बनाना और [[प्रतिक्रिया (जावास्क्रिप्ट पुस्तकालय)]] अन्य प्रोग्रामिंग भाषाओं का उपयोग करके एक पदानुक्रमित संरचना में व्यवस्थित करना शामिल है, और यह उपयोग के मामले और डेवलपर की वरीयता के आधार पर कई तरीकों का उपयोग करके किया जा सकता है।
संक्षेप में, एक डीओएम संरचना बनाने में अलग-अलग नोड्स बनाना और [[प्रतिक्रिया (जावास्क्रिप्ट पुस्तकालय)]] अन्य प्रोग्रामिंग लैंग्वेजओं का उपयोग करके एक पदानुक्रमित संरचना में व्यवस्थित करना सम्मिलित है, और यह उपयोग के मामले और डेवलपर की वरीयता के आधार पर कई तरीकों का उपयोग करके किया जा सकता है।


== कार्यान्वयन ==
== कार्यान्वयन ==
क्योंकि DOM किसी भी दिशा में नेविगेशन का समर्थन करता है (उदाहरण के लिए, माता-पिता और पिछले भाई-बहन) और मनमाना संशोधनों की अनुमति देता है, एक कार्यान्वयन को कम से कम उस दस्तावेज़ को बफर करना चाहिए जो अब तक पढ़ा गया है (या इसके कुछ पार्स किए गए रूप)।<ref>{{Cite book|url=https://books.google.com/books?id=HuSQGrRY7F4C|title=Ajax Black Book, New Edition (With Cd)|last=Kogent Solutions Inc.|publisher=Dreamtech Press|year=2008|isbn=978-8177228380|pages=40}}</ref>
क्योंकि डीओएम किसी भी दिशा में नेविगेशन का समर्थन करता है (उदाहरण के लिए, माता-पिता और पिछले भाई-बहन) और मनमाना संशोधनों की अनुमति देता है, एक कार्यान्वयन को कम से कम उस डॉक्यूमेंट को बफर करना चाहिए जो अब तक पढ़ा गया है (या इसके कुछ पार्स किए गए रूप)।<ref>{{Cite book|url=https://books.google.com/books?id=HuSQGrRY7F4C|title=Ajax Black Book, New Edition (With Cd)|last=Kogent Solutions Inc.|publisher=Dreamtech Press|year=2008|isbn=978-8177228380|pages=40}}</ref>




=== लेआउट इंजन ===
=== लेआउट इंजन ===


वेब ब्राउज़र HTML को DOM में पार्स करने के लिए वेब ब्राउज़र इंजन पर भरोसा करते हैं। कुछ लेआउट इंजन, जैसे ट्राइडेंट (लेआउट इंजन) | ट्राइडेंट/एमएसएचटीएमएल, मुख्य रूप से या विशेष रूप से इंटरनेट एक्सप्लोरर जैसे किसी विशेष ब्राउज़र से जुड़े होते हैं। [[ब्लिंक (लेआउट इंजन)]], [[वेबकिट]], और गेको (लेआउट इंजन) सहित अन्य, कई ब्राउज़रों द्वारा साझा किए जाते हैं, जैसे Google क्रोम, ओपेरा (वेब ​​ब्राउज़र), सफारी (वेब ​​ब्राउज़र), और [[फ़ायरफ़ॉक्स]]। अलग-अलग लेआउट इंजन अनुपालन की अलग-अलग डिग्री के लिए DOM मानकों को लागू करते हैं।
वेब ब्राउज़र एचटीएमएल को डीओएम में पार्स करने के लिए वेब ब्राउज़र इंजन पर भरोसा करते हैं। कुछ लेआउट इंजन, जैसे ट्राइडेंट (लेआउट इंजन) | ट्राइडेंट/एमएसएचटीएमएल, मुख्य रूप से या विशेष रूप से इंटरनेट एक्सप्लोरर जैसे किसी विशेष ब्राउज़र से जुड़े होते हैं। [[ब्लिंक (लेआउट इंजन)]], [[वेबकिट]], और गेको (लेआउट इंजन) सहित अन्य, कई ब्राउज़रों द्वारा साझा किए जाते हैं, जैसे Google क्रोम, ओपेरा (वेब ​​ब्राउज़र), सफारी (वेब ​​ब्राउज़र), और [[फ़ायरफ़ॉक्स]]। अलग-अलग लेआउट इंजन अनुपालन की अलग-अलग डिग्री के लिए डीओएम मानकों को लागू करते हैं।


=== पुस्तकालय ===
=== पुस्तकालय ===
डोम कार्यान्वयन:
डोम कार्यान्वयन:


* [[libxml2]]
* [[libxml2|libएक्सएमएल2]]
* [[एमएसएक्सएमएल]]
* [[एमएसएक्सएमएल]]
* [[Apache Xerces]] C++, Java और Perl में लिखे गए DOM इम्प्लीमेंटेशन का संग्रह है
* [[Apache Xerces]] C++, Java और Perl में लिखे गए डीओएम इम्प्लीमेंटेशन का संग्रह है
* [https://docs.python.org/3/library/xml.dom.html xml.dom] [[पायथन (प्रोग्रामिंग भाषा)]] के लिए
* [https://docs.python.org/3/library/xml.dom.html एक्सएमएल.डीओएम] [[पायथन (प्रोग्रामिंग भाषा)|पायथन (प्रोग्रामिंग लैंग्वेज)]] के लिए
* <SCRIPT> के लिए XML एक JavaScript-आधारित DOM कार्यान्वयन है<ref>{{cite web|url=http://xmljs.sourceforge.net/|title=XML for <SCRIPT> Cross Platform XML Parser in JavaScript|access-date=23 September 2016}}</ref>
* <SCRIPT> के लिए एक्सएमएल एक JavaScript-आधारित डीओएम कार्यान्वयन है<ref>{{cite web|url=http://xmljs.sourceforge.net/|title=XML for <SCRIPT> Cross Platform XML Parser in JavaScript|access-date=23 September 2016}}</ref>
* [https://github.com/PhpGt/Dom PHP.Gt DOM] एक सर्वर-साइड DOM कार्यान्वयन है जो libxml2 पर आधारित है और DOM स्तर 4 अनुकूलता लाता है<ref>{{cite web|url=https://php.gt/dom#features-at-a-glance|title=The modern DOM API for PHP 7 projects|date=5 December 2021}}</ref> [[PHP]] प्रोग्रामिंग भाषा के लिए
* [https://github.com/PhpGt/Dom PHP.Gt डीओएम] एक सर्वर-साइड डीओएम कार्यान्वयन है जो libएक्सएमएल2 पर आधारित है और डीओएम स्तर 4 अनुकूलता लाता है<ref>{{cite web|url=https://php.gt/dom#features-at-a-glance|title=The modern DOM API for PHP 7 projects|date=5 December 2021}}</ref> [[PHP]] प्रोग्रामिंग लैंग्वेज के लिए
* [https://github.com/fgnass/domino/ डोमिनोज़] एक सर्वर-साइड (नोड.जेएस) डोम कार्यान्वयन है जो मोज़िला के डोम.जेएस पर आधारित है। डोमिनोज़ का उपयोग विज़ुअल एडिटर के साथ [[मीडियाविकि]] स्टैक में किया जाता है।
* [https://github.com/fgnass/domino/ डोमिनोज़] एक सर्वर-साइड (नोड.जेएस) डोम कार्यान्वयन है जो मोज़िला के डोम.जेएस पर आधारित है। डोमिनोज़ का उपयोग विज़ुअल एडिटर के साथ [[मीडियाविकि]] स्टैक में किया जाता है।
* [https://github.com/wooly905/SimpleHtmlDom/ SimpleHtmlDom] C# में एक साधारण HTML डॉक्यूमेंट ऑब्जेक्ट मॉडल है, जो प्रोग्रामेटिक रूप से HTML स्ट्रिंग उत्पन्न कर सकता है।
* [https://github.com/wooly905/SimpleHtmlDom/ Simpleएचटीएमएलडीओएम] C# में एक साधारण एचटीएमएल डॉक्यूमेंट ऑब्जेक्ट मॉडल है, जो प्रोग्रामेटिक रूप से एचटीएमएल स्ट्रिंग उत्पन्न कर सकता है।


एपीआई जो डीओएम कार्यान्वयन का खुलासा करते हैं:
एपीआई जो डीओएम कार्यान्वयन का खुलासा करते हैं:


* [[एक्सएमएल प्रोसेसिंग के लिए जावा एपीआई]] (एक्सएमएल प्रोसेसिंग के लिए जावा एपीआई) डोम प्रदाताओं तक पहुंचने के लिए एक एपीआई है
* [[एक्सएमएल प्रोसेसिंग के लिए जावा एपीआई]] (एक्सएमएल प्रोसेसिंग के लिए जावा एपीआई) डोम प्रदाताओं तक पहुंचने के लिए एक एपीआई है
* [[Lazarus (IDE)]] ([[फ़्री पास्कल]] IDE) में DOM के दो वेरिएंट हैं - UTF-8 और ANSI फॉर्मेट के साथ
* [[Lazarus (IDE)]] ([[फ़्री पास्कल]] IDE) में डीओएम के दो वेरिएंट हैं - UTF-8 और ANSI फॉर्मेट के साथ


निरीक्षण उपकरण:
निरीक्षण उपकरण:
Line 215: Line 216:


==बाहरी संबंध==
==बाहरी संबंध==
{{Commons category|Document object models|lcfirst=yes}}
* [https://dom.spec.whatwg.org/ डीओएम Living Standard] by the व्हातवग
 
* [https://www.w3.org/DOM/ Original डब्ल्यू3सी डीओएम hub] by the डब्ल्यू3सी डीओएम Working Group (outdated)
* [https://dom.spec.whatwg.org/ DOM Living Standard] by the WHATWG
* [https://www.w3.org/WebPlatform/WG/ Web Platform Working Group] (current steward of डब्ल्यू3सी डीओएम)
* [https://www.w3.org/DOM/ Original W3C DOM hub] by the W3C DOM Working Group (outdated)
* [https://www.w3.org/WebPlatform/WG/ Web Platform Working Group] (current steward of W3C DOM)
 
{{JavaScript}}
{{Web browsers|fsp}}
{{W3C Standards}}
{{Web interfaces}}
{{Authority control}}
{{Authority control}}


Revision as of 22:30, 1 March 2023

डॉक्यूमेंट ऑब्जेक्ट मॉडल (DOM)
DOM-model.svg
एचटीएमएल दस्तावेज़ में डीओएम पदानुक्रम का उदाहरण
Abbreviationडीओएम
Latest versionडीओएम4[1]
Template:प्रारंभ तिथि और उम्र
Organizationवर्ल्ड वाइड वेब कंसोर्टियम, व्हाटवग
Base standardsWHATWG DOM Living Standard
W3C DOM4

डॉक्यूमेंट ऑब्जेक्ट मॉडल (डीओएम) एक क्रॉस-प्लेटफॉर्म और लैंग्वेज-इंडिपेंडेंट इंटरफ़ेस है। लैंग्वेज-इंडिपेंडेंट इंटरफ़ेस जो एक एक्सएमएल या एचटीएमएल डॉक्यूमेंट को ट्री की संरचना के रूप में मानता है जिसमें प्रत्येक नोड (कंप्यूटर विज्ञान) एक वस्तु (कंप्यूटर विज्ञान) है जो किसी निश्चित भाग का प्रतिनिधित्व करता है। डॉक्यूमेंट का डीओएम एक लॉजिकल ट्री वाले डॉक्यूमेंट का प्रतिनिधित्व करता है। ट्री की प्रत्येक शाखा एक नोड में समाप्त होती है, और प्रत्येक नोड में ऑब्जेक्ट होते हैं। डीओएम विधियाँ ट्री तक प्रोग्रामेटिक पहुँच की अनुमति देती हैं; उनके साथ कोई डॉक्यूमेंट की संरचना, शैली या सामग्री को परिवर्तित किया जा सकता है।[2] नोड्स में आयोजन प्रबंधकर्ता जुड़े हो सकते हैं। एक बार घटना प्रारम्भ हो जाने के बाद, ईवेंट हैंडलर निष्पादित हो जाते हैं।[3]

डीओएम का प्रमुख मानकीकरण विश्वव्यापी वेब संकाय (डब्ल्यू3सी) द्वारा नियंत्रित किया गया था, जिसने आखिरी बार 2004 में एक अनुज्ञप्ति विकसित की थी। व्हातवग ने मानक के विकास की जिम्मेदारी ली, इसे एक जीवित डॉक्यूमेंट के रूप में प्रकाशित किया। डब्ल्यू3सी अब व्हातवग मानक के स्थिर स्नैपशॉट प्रकाशित करता है।

एचटीएमएल डीओएम (डॉक्यूमेंट ऑब्जेक्ट मॉडल) में, प्रत्येक तत्व एक नोड है:[4]

  • प्रत्येक डॉक्यूमेंट एक डॉक्यूमेंट नोड है।
  • सभी एचटीएमएल तत्व नोड हैं।
  • सभी एचटीएमएल विशेषताएँ नोड हैं।
  • एचटीएमएल तत्वों में डाला गया टेक्स्ट नोड है।
  • टिप्पणियाँ नोड हैं।

इतिहास

डॉक्यूमेंट ऑब्जेक्ट मॉडल का इतिहास 1990 के दशक के अंत में नेटस्केप नेविगेटर और [[माइक्रोसॉफ्ट अंतर्जाल अन्वेषक]] के साथ-साथ जावास्क्रिप्ट और जेस्क्रिप्ट के बीच ब्राउज़र युद्ध के इतिहास के साथ जुड़ा हुआ है, जावास्क्रिप्ट इंजन में व्यापक रूप से लागू होने वाली पहली स्क्रिप्टिंग लैंग्वेजएं वेब ब्राउज़र की लैंग्वेज थी।

जावास्क्रिप्ट को नेटस्केप संचार द्वारा 1995 में नेटस्केप नेविगेटर 2.0 के भीतर जारी किया गया था। नेटस्केप के प्रतियोगी, माइक्रोसॉफ्ट ने अगले वर्ष इंटरनेट एक्सप्लोरर 3.0 जारी किया, जिसमें जेस्क्रिप्ट नामक जावास्क्रिप्ट का पुन: कार्यान्वयन किया गया। जावास्क्रिप्ट और जेस्क्रिप्ट वेब डेवलपर को ग्राहक की ओर इंटरएक्टिविटी के साथ वेब पेज बनाने देते हैं। इन लैंग्वेजओं की पहली पीढ़ी में उपयोगकर्ता-जनित ईवेंट (कंप्यूटिंग) का पता लगाने और एचटीएमएल डॉक्यूमेंट को संशोधित करने की सीमित सुविधाओं को अंततः डीओएम स्तर 0 या लीगेसी डीओएम के रूप में जाना जाने लगा। डीओएम स्तर 0 के लिए कोई इंडिपेंडेंट मानक विकसित नहीं किया गया था, लेकिन इसे एचटीएमएल4 के इंटरफ़ेसों में आंशिक रूप से वर्णित किया गया था।

लीगेसी डोम उन एचटीएमएल तत्वों के प्रकारों में सीमित था जिन्हें एक्सेस किया जा सकता था। प्रपत्र (वेब), हाइपरलिंक और छवि तत्वों को एक श्रेणीबद्ध नाम से संदर्भित किया जा सकता है जो मूल डॉक्यूमेंट वस्तु से प्रारम्भ होता है। एक पदानुक्रमित नाम ट्रैवर्स किए गए तत्वों के नाम या अनुक्रमिक अनुक्रमणिका का उपयोग कर सकता है। उदाहरण के लिए, एक पाठ बॉक्स को या तो एक्सेस किया जा सकता है document.formName.inputName या document.forms[0].elements[0].

लीगेसी डोम सक्षम क्लाइंट-साइड फॉर्म सत्यापन और सरल इंटरफ़ेस अन्तरक्रियाशीलता जैसे टूलटिप बनाना।

1997 में, नेटस्केप और माइक्रोसॉफ्ट ने क्रमशः नेटस्केप नेविगेटर और इंटरनेट एक्सप्लोरर का संस्करण 4.0 जारी किया, गतिशील एचटीएमएल (डीएचटीएमएल) कार्यक्षमता के लिए समर्थन जोड़कर एक लोड किए गए एचटीएमएल डॉक्यूमेंट में परिवर्तन को सक्षम किया। डीएचटीएम को प्राथमिक डॉक्यूमेंट ऑब्जेक्ट के लिए एक्सटेंशन की आवश्यकता होती है जो लीगेसी डीओएम कार्यान्वयन में उपलब्ध था। हालांकि जेस्क्रिप्ट जावास्क्रिप्ट पर आधारित होने के कारण लीगेसी डोम कार्यान्वयन काफी हद तक संगत थे, डीएचटीएमएल डोम एक्सटेंशन प्रत्येक ब्राउज़र निर्माता द्वारा समानांतर में विकसित किए गए थे और असंगत बने रहे। डीओएम के इन संस्करणों को इंटरमीडिएट डीओएम के रूप में जाना जाने लगा।

ईसीएमए स्क्रिप्ट के मानकीकरण के बाद, वर्ल्ड वाइड वेब कंसोर्टियम डीओएम वर्किंग ग्रुप ने एक मानक डीओएम इंटरफ़ेसन का प्रारूप तैयार करना प्रारम्भ किया। पूर्ण इंटरफ़ेस, जिसे डीओएम स्तर 1 के रूप में जाना जाता है, 1998 के अंत में डब्ल्यू3सी अनुशंसा बन गया। 2005 तक, डब्ल्यू3सी डीओएम के बड़े हिस्से सामान्य ईसीएमए स्क्रिप्ट-सक्षम ब्राउज़रों द्वारा अच्छी तरह से समर्थित थे, जिनमें Internet Explorer 6 (2001 से), ओपेरा (वेब ​​ब्राउज़र) सम्मिलित थे।) सफारी (वेब ​​ब्राउज़र) और गेको (लेआउट इंजन)-आधारित ब्राउज़र (जैसे मोज़िला एप्लीकेशन सूट, मोज़िला फ़ायरफ़ॉक्स, समुद्री बन्दर और कैमिनो (वेब ​​ब्राउज़र))।

मानक

व्हाटवग डोम

डब्ल्यू3सी डीओएम वर्किंग ग्रुप ने अपनी अंतिम अनुज्ञप्ति प्रकाशित की और बाद में 2004 में भंग कर दिया। विकास के प्रयास व्हातवग में चले गए, जो एक जीवन स्तर को बनाए रखना जारी रखता है।[5] 2009 में, वेब एप्लिकेशन समूह ने डब्ल्यू3सी में डीओएम गतिविधियों को पुनर्गठित किया।[6] 2013 में, प्रगति की कमी और आप ऊब जाएंगे 5 की आसन्न रिलीज के कारण, डीओएम लेवल 4 इंटरफ़ेस को एचटीएमएल वर्किंग ग्रुप को पूरा करने में तेजी लाने के लिए पुन: असाइन किया गया था।[7] इस बीच, 2015 में, वेब एप्लिकेशन समूह को भंग कर दिया गया और डीओएम स्टीवर्डशिप वेब प्लेटफ़ॉर्म समूह को दे दी गई।[8] 2015 में डीओएम स्तर 4 के प्रकाशन के साथ शुरुआत करते हुए, डब्ल्यू3सी व्हातवग मानक के स्नैपशॉट के आधार पर नई अनुशंसाएँ बनाता है।

  • डीओएम स्तर 1 संपूर्ण एचटीएमएल या एक्सएमएल डॉक्यूमेंट के लिए एक पूर्ण मॉडल प्रदान करता है, जिसमें डॉक्यूमेंट के किसी भी हिस्से को बदलने का साधन सम्मिलित है।
  • डीओएम लेवल 2 को 2000 के अंत में प्रकाशित किया गया था getElementById फ़ंक्शन के साथ-साथ डीओएम ईवेंट और एक्सएमएल नामस्थान और CSS के लिए समर्थन।
  • डीओएम लेवल 3, अप्रैल 2004 में प्रकाशित, XPath और कीबोर्ड घटना से निपटना के लिए समर्थन जोड़ा गया, साथ ही एक्सएमएल के रूप में क्रमांकन डॉक्यूमेंटों के लिए एक इंटरफ़ेस।
  • डीओएम Level 4 को 2015 में प्रकाशित किया गया था। यह व्हातवग जीवन स्तर का एक स्नैपशॉट है।[9]


अनुप्रयोग

वेब ब्राउजर

वेब ब्राउज़र इंजन के लिए एक एचटीएमएल पेज जैसे डॉक्यूमेंट, अधिकांश वेब ब्राउज़र डीओएम के समान एक आंतरिक मॉडल का उपयोग करते हैं। प्रत्येक डॉक्यूमेंट के नोड्स को ट्री स्ट्रक्चर में व्यवस्थित किया जाता है, जिसे 'डीओएम ट्री' कहा जाता है, जिसमें सबसे ऊपरी नोड को डॉक्यूमेंट ऑब्जेक्ट नाम दिया जाता है। जब एक एचटीएमएल पृष्ठ ब्राउज़रों में प्रस्तुत किया जाता है, तो ब्राउज़र एचटीएमएल को स्थानीय मेमोरी में डाउनलोड करता है और स्क्रीन पर पृष्ठ प्रदर्शित करने के लिए स्वचालित रूप से इसे पार्स करता है। हालाँकि, डीओएम को एक ट्री के रूप में प्रस्तुत करने की आवश्यकता नहीं है,[10] और कुछ ब्राउज़रों ने अन्य आंतरिक मॉडलों का उपयोग किया है।[11]


जावास्क्रिप्ट

जब कोई वेब पेज लोड होता है, तो ब्राउजर पेज का एक डॉक्यूमेंट ऑब्जेक्ट मॉडल बनाता है, जो एक एचटीएमएल डॉक्यूमेंट का ऑब्जेक्ट ओरिएंटेड प्रतिनिधित्व होता है जो जावास्क्रिप्ट और खुद डॉक्यूमेंट के बीच एक इंटरफेस के रूप में कार्य करता है। यह गतिशील वेब पृष्ठों के निर्माण की अनुमति देता है,[12] क्योंकि एक पृष्ठ के भीतर जावास्क्रिप्ट कर सकता है:

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

डोम वृक्ष संरचना

डॉक्यूमेंट ऑब्जेक्ट मॉडल (डीओएम) ट्री एक एचटीएमएल या एक्सएमएल डॉक्यूमेंट का एक पदानुक्रमित प्रतिनिधित्व है। इसमें रूट नोड होता है, जो डॉक्यूमेंट ही होता है, और बाल नोड्स की एक श्रृंखला होती है जो डॉक्यूमेंट के तत्वों, विशेषताओं और टेक्स्ट सामग्री का प्रतिनिधित्व करती है। ट्री में प्रत्येक नोड में रूट नोड को छोड़कर एक पैरेंट नोड होता है, और इसमें कई चाइल्ड नोड हो सकते हैं।

=== नोड्स === के रूप में तत्व

एचटीएमएल या एक्सएमएल डॉक्यूमेंट में तत्वों को डीओएम ट्री में नोड्स के रूप में दर्शाया जाता है। प्रत्येक तत्व नोड में एक टैग नाम, विशेषताएँ होती हैं, और इसमें अन्य तत्व नोड या बच्चों के रूप में टेक्स्ट नोड हो सकते हैं। उदाहरण के लिए, निम्न संरचना वाला एचटीएमएल डॉक्यूमेंट:

<एचटीएमएल>
  <सिर>
    <शीर्षक>मेरी वेबसाइट</शीर्षक>
  </ सिर>
  <शरीर>
    <h1>स्वागत है</h1>
    <p>यह मेरी वेबसाइट है।</p>
  </शरीर>
</html>

डीओएम ट्री में इस रूप में दर्शाया जाएगा:

- दस्तावेज़ (रूट)
  - एचटीएमएल
    - सिर
      - शीर्षक
        -  मेरी वेबसाइट
    - शरीर
      - एच 1
        -  स्वागत
      - पी
        - यह मेरी वेबसाइट है।

</वाक्यविन्यास हाइलाइट>

=== टेक्स्ट नोड्स ===
किसी तत्व के भीतर टेक्स्ट सामग्री को DOM ट्री में टेक्स्ट नोड के रूप में दर्शाया जाता है। टेक्स्ट नोड्स में एट्रीब्यूट्स या चाइल्ड नोड्स नहीं होते हैं, और ये हमेशा ट्री में लीफ नोड्स होते हैं। उदाहरण के लिए, उपरोक्त उदाहरण में शीर्षक तत्व में पाठ सामग्री मेरी वेबसाइट और h1 तत्व में स्वागत है, दोनों को पाठ नोड के रूप में दर्शाया गया है।

=== गुणों के रूप में गुण ===
किसी तत्व के गुणों को DOM ट्री में तत्व नोड के गुणों के रूप में दर्शाया जाता है। उदाहरण के लिए, निम्न HTML वाला एक तत्व:<syntaxhighlight lang= html >
<a href= https://example.com>लिंक</a>

डीओएम ट्री में इस रूप में दर्शाया जाएगा:

- ए
  - href: https://example.com
  -  जोड़ना

</वाक्यविन्यास हाइलाइट>

== डोम ट्री में हेरफेर करना ==
DOM ट्री को जावास्क्रिप्ट या अन्य प्रोग्रामिंग भाषाओं का उपयोग करके हेरफेर किया जा सकता है। सामान्य कार्यों में ट्री को नेविगेट करना, नोड्स को जोड़ना, हटाना और संशोधित करना और नोड्स के गुणों को प्राप्त करना और सेट करना शामिल है। DOM API इन कार्यों को करने के लिए विधियों और गुणों का एक सेट प्रदान करता है, जैसे <code>getElementById</code>, <code>createElement</code>, <code>appendChild</code>, और <code>innerHTML</code><syntaxhighlight लैंग = जावास्क्रिप्ट>
// रूट एलिमेंट बनाएं
var रूट = दस्तावेज़.क्रिएट एलिमेंट (रूट);

// एक चाइल्ड एलिमेंट बनाएं
var बच्चा = दस्तावेज़। createElement (बच्चा);

// चाइल्ड एलिमेंट को रूट एलिमेंट में जोड़ें
root.appendChild (बच्चा);

डीओएम संरचना बनाने का एक अन्य तरीका एचटीएमएल कोड को एक स्ट्रिंग के रूप में सम्मिलित करने के लिए innerएचटीएमएल गुण का उपयोग करना है, जिससे प्रक्रिया में तत्व और बच्चे बनते हैं। उदाहरण के लिए: <वाक्यविन्यास लैंग = जावास्क्रिप्ट>

document.getElementById (रूट) .आंतरिक एचटीएमएल = <child></child>; </syntaxhighlight>एक अन्य विधि जावास्क्रिप्ट लाइब्रेरी या फ्रेमवर्क जैसे कि jQuery, AngularJS, React (जावास्क्रिप्ट लाइब्रेरी), Vue.js, आदि का उपयोग करना है। ये लाइब्रेरी डीओएम बनाने, हेरफेर करने और बातचीत करने के लिए एक अधिक सुविधाजनक और कुशल तरीका प्रदान करती हैं। .

डेटा को पार्स करने और उसके अनुसार नोड्स बनाने के लिए जावास्क्रिप्ट विधियों का उपयोग करके एक्सएमएल या JSON डेटा से डीओएम संरचना बनाना भी संभव है।

यह ध्यान रखना महत्वपूर्ण है कि एक डोम संरचना बनाने का मतलब यह नहीं है कि यह वेब पेज में प्रदर्शित होगा, यह केवल स्मृति में मौजूद है और इसे डॉक्यूमेंट निकाय या एक विशिष्ट कंटेनर में प्रस्तुत किया जाना चाहिए।

संक्षेप में, एक डीओएम संरचना बनाने में अलग-अलग नोड्स बनाना और प्रतिक्रिया (जावास्क्रिप्ट पुस्तकालय) अन्य प्रोग्रामिंग लैंग्वेजओं का उपयोग करके एक पदानुक्रमित संरचना में व्यवस्थित करना सम्मिलित है, और यह उपयोग के मामले और डेवलपर की वरीयता के आधार पर कई तरीकों का उपयोग करके किया जा सकता है।

कार्यान्वयन

क्योंकि डीओएम किसी भी दिशा में नेविगेशन का समर्थन करता है (उदाहरण के लिए, माता-पिता और पिछले भाई-बहन) और मनमाना संशोधनों की अनुमति देता है, एक कार्यान्वयन को कम से कम उस डॉक्यूमेंट को बफर करना चाहिए जो अब तक पढ़ा गया है (या इसके कुछ पार्स किए गए रूप)।[13]


लेआउट इंजन

वेब ब्राउज़र एचटीएमएल को डीओएम में पार्स करने के लिए वेब ब्राउज़र इंजन पर भरोसा करते हैं। कुछ लेआउट इंजन, जैसे ट्राइडेंट (लेआउट इंजन) | ट्राइडेंट/एमएसएचटीएमएल, मुख्य रूप से या विशेष रूप से इंटरनेट एक्सप्लोरर जैसे किसी विशेष ब्राउज़र से जुड़े होते हैं। ब्लिंक (लेआउट इंजन), वेबकिट, और गेको (लेआउट इंजन) सहित अन्य, कई ब्राउज़रों द्वारा साझा किए जाते हैं, जैसे Google क्रोम, ओपेरा (वेब ​​ब्राउज़र), सफारी (वेब ​​ब्राउज़र), और फ़ायरफ़ॉक्स। अलग-अलग लेआउट इंजन अनुपालन की अलग-अलग डिग्री के लिए डीओएम मानकों को लागू करते हैं।

पुस्तकालय

डोम कार्यान्वयन:

  • libएक्सएमएल2
  • एमएसएक्सएमएल
  • Apache Xerces C++, Java और Perl में लिखे गए डीओएम इम्प्लीमेंटेशन का संग्रह है
  • एक्सएमएल.डीओएम पायथन (प्रोग्रामिंग लैंग्वेज) के लिए
  • <SCRIPT> के लिए एक्सएमएल एक JavaScript-आधारित डीओएम कार्यान्वयन है[14]
  • PHP.Gt डीओएम एक सर्वर-साइड डीओएम कार्यान्वयन है जो libएक्सएमएल2 पर आधारित है और डीओएम स्तर 4 अनुकूलता लाता है[15] PHP प्रोग्रामिंग लैंग्वेज के लिए
  • डोमिनोज़ एक सर्वर-साइड (नोड.जेएस) डोम कार्यान्वयन है जो मोज़िला के डोम.जेएस पर आधारित है। डोमिनोज़ का उपयोग विज़ुअल एडिटर के साथ मीडियाविकि स्टैक में किया जाता है।
  • Simpleएचटीएमएलडीओएम C# में एक साधारण एचटीएमएल डॉक्यूमेंट ऑब्जेक्ट मॉडल है, जो प्रोग्रामेटिक रूप से एचटीएमएल स्ट्रिंग उत्पन्न कर सकता है।

एपीआई जो डीओएम कार्यान्वयन का खुलासा करते हैं:

निरीक्षण उपकरण:

यह भी देखें

संदर्भ

  1. ↑ सभी संस्करण केवल डब्ल्यू3सी डीओएम को संदर्भित करते हैं।
  2. ↑ "Document Object Model (DOM): definition, structure and example". IONOS Digitalguide (in English). Retrieved 2022-04-21.
  3. ↑ "Document Object Model (DOM)". W3C. Retrieved 2012-01-12. The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents.
  4. ↑ [1]
  5. ↑ "DOM Standard". Retrieved 23 September 2016.
  6. ↑ "W3C Document Object Model". Retrieved 23 September 2016.
  7. ↑ (plh@w3.org), Philippe Le Hegaret. "New Charter for the HTML Working Group from Philippe Le Hegaret on 2013-09-30 (public-html-admin@w3.org from September 2013)". Retrieved 23 September 2016.
  8. ↑ "PubStatus - WEBAPPS". Retrieved 23 September 2016.
  9. ↑ "W3C DOM4". Retrieved 8 January 2021.
  10. ↑ "What is the Document Object Model?". W3C. Retrieved 2021-09-12. However, the DOM does not specify that documents must be implemented as a tree or a grove, nor does it specify how the relationships among objects be implemented. The DOM is a logical model that may be implemented in any convenient manner.
  11. ↑ "Modernizing the DOM tree in Microsoft Edge". Microsoft. 19 April 2017. Retrieved 2021-09-12.
  12. ↑ "JavaScript HTML DOM". Retrieved 23 September 2016.
  13. ↑ Kogent Solutions Inc. (2008). Ajax Black Book, New Edition (With Cd). Dreamtech Press. p. 40. ISBN 978-8177228380.
  14. ↑ "XML for <SCRIPT> Cross Platform XML Parser in JavaScript". Retrieved 23 September 2016.
  15. ↑ "The modern DOM API for PHP 7 projects". 5 December 2021.



सामान्य संदर्भ


बाहरी संबंध

Retrieved from ‘https://www.vigyanwiki.in/index.php?title=डॉक्यूमेंट_ऑब्जेक्ट_मॉडल&oldid=102211’