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

From Vigyanwiki
No edit summary
Line 88: Line 88:
   </body>
   </body>
</html>
</html>
</syntaxhighlight>will be represented in the DOM tree as:<syntaxhighlight lang="text">
</syntaxhighlight>DOM ट्री में इस प्रकार दर्शाया जाएगा:<syntaxhighlight lang="text">
- Document (root)
- Document (root)
   - html
   - html
Line 109: Line 109:
किसी तत्व के गुणों को DOM ट्री में तत्व नोड के गुणों के रूप में दर्शाया जाता है। उदाहरण के लिए, निम्न HTML वाला एक तत्व:<syntaxhighlight lang="html">
किसी तत्व के गुणों को DOM ट्री में तत्व नोड के गुणों के रूप में दर्शाया जाता है। उदाहरण के लिए, निम्न HTML वाला एक तत्व:<syntaxhighlight lang="html">
<a href="https://example.com">Link</a>
<a href="https://example.com">Link</a>
</syntaxhighlight>will be represented in the DOM tree as:<syntaxhighlight lang="text">
</syntaxhighlight>DOM ट्री में इस प्रकार दर्शाया जाएगा:<syntaxhighlight lang="text">
- a
- a
   - href: "https://example.com"
   - href: "https://example.com"
Line 117: Line 117:


== डोम ट्री में हेरफेर करना ==
== डोम ट्री में हेरफेर करना ==
DOM ट्री को जावास्क्रिप्ट या अन्य प्रोग्रामिंग भाषाओं का उपयोग करके हेरफेर किया जा सकता है। सामान्य कार्यों में ट्री को नेविगेट करना, नोड्स को जोड़ना, हटाना और संशोधित करना और नोड्स के गुणों को प्राप्त करना और सेट करना शामिल है। DOM API इन कार्यों को करने के लिए विधियों और गुणों का एक सेट प्रदान करता है, जैसे <code>getElementById</code>, <code>createElement</code>, <code>appendChild</code>, and <code>innerHTML</code>.<syntaxhighlight lang="javascript">
DOM ट्री को जावास्क्रिप्ट या अन्य प्रोग्रामिंग भाषाओं का उपयोग करके हेरफेर किया जा सकता है। सामान्य कार्यों में ट्री को नेविगेट करना, नोड्स को जोड़ना, हटाना और संशोधित करना और नोड्स के गुणों को प्राप्त करना और सेट करना सम्मिलित है। DOM API इन कार्यों को करने के लिए विधियों और गुणों का एक सेट प्रदान करता है, जैसे <code>getElementById</code>, <code>createElement</code>, <code>appendChild</code>, and <code>innerHTML</code>.<syntaxhighlight lang="javascript">
// Create the root element
// Create the root element
var root = document.createElement("root");
var root = document.createElement("root");
Line 129: Line 129:
</syntaxhighlight>डीओएम संरचना बनाने का एक अन्य तरीका एचटीएमएल कोड को एक स्ट्रिंग के रूप में सम्मिलित करने के लिए innerएचटीएमएल गुण का उपयोग करना है, जिससे प्रक्रिया में तत्व और बच्चे बनते हैं। उदाहरण के लिए: <syntaxhighlight lang="javascript">
</syntaxhighlight>डीओएम संरचना बनाने का एक अन्य तरीका एचटीएमएल कोड को एक स्ट्रिंग के रूप में सम्मिलित करने के लिए innerएचटीएमएल गुण का उपयोग करना है, जिससे प्रक्रिया में तत्व और बच्चे बनते हैं। उदाहरण के लिए: <syntaxhighlight lang="javascript">
document.getElementById("root").innerHTML = "<child></child>";
document.getElementById("root").innerHTML = "<child></child>";
</syntaxhighlight></nowiki>एक अन्य विधि जावास्क्रिप्ट लाइब्रेरी या फ्रेमवर्क जैसे कि [[jQuery]], [[AngularJS]], React (जावास्क्रिप्ट लाइब्रेरी), Vue.js, आदि का उपयोग करना है। ये लाइब्रेरी डीओएम बनाने, हेरफेर करने और बातचीत करने के लिए एक अधिक सुविधाजनक और कुशल तरीका प्रदान करती हैं। .
</syntaxhighlight>एक अन्य विधि जावास्क्रिप्ट लाइब्रेरी या फ्रेमवर्क जैसे कि [[jQuery]], [[AngularJS]], React (जावास्क्रिप्ट लाइब्रेरी), Vue.js, आदि का उपयोग करना है। ये लाइब्रेरी डीओएम बनाने, हेरफेर करने और बातचीत करने के लिए एक अधिक सुविधाजनक और कुशल तरीका प्रदान करती हैं।


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


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


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


* [[libxml2|libएक्सएमएल2]]
* [[libxml2|लिबएक्सएमएल2]]
* [[एमएसएक्सएमएल]]
* [[एमएसएक्सएमएल]]
* [[Apache Xerces]] C++, Java और Perl में लिखे गए डीओएम इम्प्लीमेंटेशन का संग्रह है
* [[Apache Xerces|अपाचे सेरेस]] सी++, जावा और पर्ल में लिखे गए डीओएम इम्प्लीमेंटेशन का संग्रह है
* [https://docs.python.org/3/library/xml.dom.html एक्सएमएल.डीओएम] [[पायथन (प्रोग्रामिंग भाषा)|पायथन (प्रोग्रामिंग लैंग्वेज)]] के लिए
* [https://docs.python.org/3/library/xml.dom.html एक्सएमएल.डीओएम] [[पायथन (प्रोग्रामिंग भाषा)|पायथन (प्रोग्रामिंग लैंग्वेज)]] के लिए एक्सएमएल एक जावा स्क्रिप्ट-आधारित डीओएम कार्यान्वयन है<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 पीएचपी.जीटी डीओएम] एक सर्वर-साइड डीओएम कार्यान्वयन है जो लिबएक्सएमएल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>
* [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]] प्रोग्रामिंग लैंग्वेज के लिए
*[[PHP|पीएचपी]] प्रोग्रामिंग लैंग्वेज के लिए [https://github.com/fgnass/domino/ डोमिनोज़] एक सर्वर-साइड (नोड.जेएस) डोम कार्यान्वयन है जो मोज़िला के डोम.जेएस पर आधारित है। डोमिनोज़ का उपयोग विज़ुअल एडिटर के साथ [[मीडियाविकि]] स्टैक में किया जाता है।
* [https://github.com/fgnass/domino/ डोमिनोज़] एक सर्वर-साइड (नोड.जेएस) डोम कार्यान्वयन है जो मोज़िला के डोम.जेएस पर आधारित है। डोमिनोज़ का उपयोग विज़ुअल एडिटर के साथ [[मीडियाविकि]] स्टैक में किया जाता है।
* [https://github.com/wooly905/SimpleHtmlDom/ सिंपल एचटीएमएलडी ओएम] C# में एक साधारण एचटीएमएल डॉक्यूमेंट ऑब्जेक्ट मॉडल है, जो प्रोग्रामेटिक रूप से एचटीएमएल स्ट्रिंग उत्पन्न कर सकता है।
* [https://github.com/wooly905/SimpleHtmlDom/ Simpleएचटीएमएलडीओएम] C# में एक साधारण एचटीएमएल डॉक्यूमेंट ऑब्जेक्ट मॉडल है, जो प्रोग्रामेटिक रूप से एचटीएमएल स्ट्रिंग उत्पन्न कर सकता है।


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


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


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

Revision as of 17:12, 2 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सी डीओएम के बड़े हिस्से सामान्य ईसीएमए स्क्रिप्ट-सक्षम ब्राउज़रों द्वारा अच्छी तरह से समर्थित थे, जिनमें इंटरनेट एक्स्प्लोरर 6 (2001 से), ओपेरा (वेब ​​ब्राउज़र) सम्मिलित थे।) सफारी (वेब ​​ब्राउज़र) और गेको (लेआउट इंजन)-आधारित ब्राउज़र (जैसे मोज़िला एप्लीकेशन सूट, मोज़िला फ़ायरफ़ॉक्स, सी मंकी और कैमिनो (वेब ​​ब्राउज़र))।

मानक

व्हाटवग डोम

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

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


अनुप्रयोग

वेब ब्राउजर

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


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

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

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

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

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

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

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

<html>
  <head>
    <title>My Website</title>
  </head>
  <body>
    <h1>Welcome</h1>
    <p>This is my website.</p>
  </body>
</html>

DOM ट्री में इस प्रकार दर्शाया जाएगा:

- Document (root)
  - html
    - head
      - title
        - "My Website"
    - body
      - h1
        - "Welcome"
      - p
        - "This is my website."


टेक्स्ट नोड्स

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

गुणों के रूप में गुण

किसी तत्व के गुणों को DOM ट्री में तत्व नोड के गुणों के रूप में दर्शाया जाता है। उदाहरण के लिए, निम्न HTML वाला एक तत्व:

<a href="https://example.com">Link</a>

DOM ट्री में इस प्रकार दर्शाया जाएगा:

- a
  - href: "https://example.com"
  - "Link"

डोम ट्री में हेरफेर करना

DOM ट्री को जावास्क्रिप्ट या अन्य प्रोग्रामिंग भाषाओं का उपयोग करके हेरफेर किया जा सकता है। सामान्य कार्यों में ट्री को नेविगेट करना, नोड्स को जोड़ना, हटाना और संशोधित करना और नोड्स के गुणों को प्राप्त करना और सेट करना सम्मिलित है। DOM API इन कार्यों को करने के लिए विधियों और गुणों का एक सेट प्रदान करता है, जैसे getElementById, createElement, appendChild, and innerHTML.

// Create the root element
var root = document.createElement("root");

// Create a child element
var child = document.createElement("child");

// Add the child element to the root element
root.appendChild(child);

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

document.getElementById("root").innerHTML = "<child></child>";

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

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

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

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

कार्यान्वयन

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


लेआउट इंजन

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

पुस्तकालय

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

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

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

यह भी देखें

संदर्भ

  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=102214’