डॉक्यूमेंट ऑब्जेक्ट मॉडल
 एचटीएमएल दस्तावेज़ में डीओएम पदानुक्रम का उदाहरण | |
| Abbreviation | डीओएम |
|---|---|
| Latest version | डीओएम4[1] Template:प्रारंभ तिथि और उम्र |
| Organization | वर्ल्ड वाइड वेब कंसोर्टियम, व्हाटवग |
| Base standards | WHATWG DOM Living Standard W3C DOM4 |
डॉक्यूमेंट ऑब्जेक्ट मॉडल (डीओएम) एक क्रॉस-प्लेटफॉर्म और लैंग्वेज-इंडिपेंडेंट इंटरफ़ेस है। लैंग्वेज-इंडिपेंडेंट इंटरफ़ेस जो एक एक्सएमएल या एचटीएमएल डॉक्यूमेंट को ट्री की संरचना के रूप में मानता है जिसमें प्रत्येक नोड (कंप्यूटर विज्ञान) एक वस्तु (कंप्यूटर विज्ञान) है जो किसी निश्चित भाग का प्रतिनिधित्व करता है। डॉक्यूमेंट का डीओएम एक लॉजिकल ट्री वाले डॉक्यूमेंट का प्रतिनिधित्व करता है। ट्री की प्रत्येक शाखा एक नोड में समाप्त होती है, और प्रत्येक नोड में ऑब्जेक्ट होते हैं। डीओएम विधियाँ ट्री तक प्रोग्रामेटिक पहुँच की अनुमति देती हैं; उनके साथ कोई डॉक्यूमेंट की संरचना, शैली या सामग्री को परिवर्तित किया जा सकता है।[2] नोड्स में आयोजन प्रबंधकर्ता जुड़े हो सकते हैं। एक बार घटना प्रारम्भ हो जाने के बाद, ईवेंट हैंडलर निष्पादित हो जाते हैं।[3]
डीओएम का प्रमुख मानकीकरण विश्वव्यापी वेब संकाय (डब्ल्यू3सी) द्वारा नियंत्रित किया गया था, जिसने आखिरी बार 2004 में एक अनुज्ञप्ति विकसित की थी। व्हातवग ने मानक के विकास की जिम्मेदारी ली, इसे एक जीवित डॉक्यूमेंट के रूप में प्रकाशित किया। डब्ल्यू3सी अब व्हातवग मानक के स्थिर स्नैपशॉट प्रकाशित करता है।
डीओएम एक ऐसी टेक्नोलॉजी है जिसमे जावास्क्रिप्ट आपको किसी एचटीएमएल डॉक्यूमेंट को कण्ट्रोल करने की क्षमता प्रदान करती है।
एचटीएमएल डीओएम (डॉक्यूमेंट ऑब्जेक्ट मॉडल) में, प्रत्येक तत्व एक नोड है:[4]
- प्रत्येक डॉक्यूमेंट एक डॉक्यूमेंट नोड है।
- सभी एचटीएमएल तत्व नोड हैं।
- सभी एचटीएमएल विशेषताएँ नोड हैं।
- एचटीएमएल तत्वों में डाला गया टेक्स्ट नोड है।
- टिप्पणियाँ नोड हैं।
इतिहास
डॉक्यूमेंट ऑब्जेक्ट मॉडल का इतिहास 1990 के दशक के अंत में नेटस्केप नेविगेटर और [[माइक्रोसॉफ्ट अंतर्जाल अन्वेषक]] के साथ-साथ जावास्क्रिप्ट और जेस्क्रिप्ट के बीच ब्राउज़र युद्ध के इतिहास के साथ जुड़ा हुआ है, जावास्क्रिप्ट इंजन में व्यापक रूप से लागू होने वाली पहली स्क्रिप्टिंग लैंग्वेजएं वेब ब्राउज़र की लैंग्वेज थी।
जावास्क्रिप्ट को नेटस्केप संचार द्वारा 1995 में नेटस्केप नेविगेटर 2.0 के भीतर जारी किया गया था। नेटस्केप के प्रतियोगी, माइक्रोसॉफ्ट ने अगले वर्ष इंटरनेट एक्सप्लोरर 3.0 जारी किया, जिसमें जेस्क्रिप्ट नामक जावास्क्रिप्ट का पुन: कार्यान्वयन किया गया। जावास्क्रिप्ट और जेस्क्रिप्ट वेब डेवलपर को ग्राहक की ओर इंटरएक्टिविटी के साथ वेब पेज बनाने देते हैं। इन लैंग्वेजओं की पहली पीढ़ी में उपयोगकर्ता-जनित ईवेंट (कंप्यूटिंग) का पता लगाने और एचटीएमएल डॉक्यूमेंट को संशोधित करने की सीमित सुविधाओं को अंततः डीओएम स्तर 0 या लीगेसी डीओएम के रूप में जाना जाने लगा। डीओएम स्तर 0 के लिए कोई इंडिपेंडेंट मानक विकसित नहीं किया गया था, लेकिन इसे एचटीएमएल4 के इंटरफ़ेसों में आंशिक रूप से वर्णित किया गया था।
लीगेसी डोम उन एचटीएमएल तत्वों के प्रकारों में सीमित था जिन्हें एक्सेस किया जा सकता था। प्रपत्र (वेब), हाइपरलिंक और छवि तत्वों को एक श्रेणीबद्ध नाम से संदर्भित किया जा सकता है जो मूल डॉक्यूमेंट वस्तु से प्रारम्भ होता है। एक पदानुक्रमित नाम ट्रैवर्स किए गए तत्वों के नाम या अनुक्रमिक अनुक्रमणिका का उपयोग कर सकता है। उदाहरण के लिए, एक पाठ बॉक्स को या तो एक्सेस किया जा सकता है डॉक्यूमेंट.formName.inputName या डॉक्यूमेंट.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>
डीओएम ट्री में इस प्रकार दर्शाया जाएगा:
- Document (root)
- html
- head
- title
- "My Website"
- body
- h1
- "Welcome"
- p
- "This is my website."
टेक्स्ट नोड्स
किसी तत्व के भीतर टेक्स्ट सामग्री को डीओएम ट्री में टेक्स्ट नोड के रूप में दर्शाया जाता है। टेक्स्ट नोड्स में एट्रीब्यूट्स या चाइल्ड नोड्स नहीं होते हैं, और ये हमेशा ट्री में लीफ नोड्स होते हैं। उदाहरण के लिए, उपरोक्त उदाहरण में शीर्षक तत्व में पाठ सामग्री मेरी वेबसाइट और h1 तत्व में स्वागत है, दोनों को पाठ नोड के रूप में दर्शाया गया है।
गुणों के रूप में गुण
किसी तत्व के गुणों को डीओएम ट्री में तत्व नोड के गुणों के रूप में दर्शाया जाता है। उदाहरण के लिए, निम्न एचटीएमएल वाला एक तत्व:
<a href="https://example.com">Link</a>
डीओएम ट्री में इस प्रकार दर्शाया जाएगा:
- a
- href: "https://example.com"
- "Link"
डोम ट्री में हेरफेर करना
डीओएम ट्री को जावास्क्रिप्ट या अन्य प्रोग्रामिंग भाषाओं का उपयोग करके हेरफेर किया जा सकता है। सामान्य कार्यों में ट्री को नेविगेट करना, नोड्स को जोड़ना, हटाना और संशोधित करना और नोड्स के गुणों को प्राप्त करना और सेट करना सम्मिलित है। डीओएम API इन कार्यों को करने के लिए विधियों और गुणों का एक सेट प्रदान करता है, जैसे getElementById, createElement, appendChild, and innerएचटीएमएल.
// 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]
लेआउट इंजन
वेब ब्राउज़र एचटीएमएल को डीओएम में पार्स करने के लिए वेब ब्राउज़र इंजन पर भरोसा करते हैं। कुछ लेआउट इंजन, जैसे ट्राइडेंट (लेआउट इंजन) ट्राइडेंट/एमएसएचटीएमएल, मुख्य रूप से या विशेष रूप से इंटरनेट एक्सप्लोरर जैसे किसी विशेष ब्राउज़र से जुड़े होते हैं। ब्लिंक (लेआउट इंजन), वेबकिट, और गेको (लेआउट इंजन) सहित अन्य, कई ब्राउज़रों द्वारा साझा किए जाते हैं, जैसे गूगल क्रोम, ओपेरा (वेब ब्राउज़र), सफारी (वेब ब्राउज़र), और फ़ायरफ़ॉक्स अलग-अलग लेआउट इंजन अनुपालन की अलग-अलग डिग्री के लिए डीओएम मानकों को लागू करते हैं।
पुस्तकालय
डोम कार्यान्वयन:
- लिबएक्सएमएल2
- एमएसएक्सएमएल
- अपाचे सेरेस सी++, जावा और पर्ल में लिखे गए डीओएम इम्प्लीमेंटेशन का संग्रह है
- एक्सएमएल.डीओएम पायथन (प्रोग्रामिंग लैंग्वेज) के लिए एक्सएमएल एक जावा स्क्रिप्ट-आधारित डीओएम कार्यान्वयन है[14]
- पीएचपी.जीटी डीओएम एक सर्वर-साइड डीओएम कार्यान्वयन है जो लिबएक्सएमएल2 पर आधारित है और डीओएम स्तर 4 अनुकूलता लाता है[15]
- पीएचपी प्रोग्रामिंग लैंग्वेज के लिए डोमिनोज़ एक सर्वर-साइड (नोड.जेएस) डोम कार्यान्वयन है जो मोज़िला के डोम.जेएस पर आधारित है। डोमिनोज़ का उपयोग विज़ुअल एडिटर के साथ मीडियाविकि स्टैक में किया जाता है।
- सिंपल एचटीएमएलडी ओएम C# में एक साधारण एचटीएमएल डॉक्यूमेंट ऑब्जेक्ट मॉडल है, जो प्रोग्रामेटिक रूप से एचटीएमएल स्ट्रिंग उत्पन्न कर सकता है।
एपीआई जो डीओएम कार्यान्वयन का खुलासा करते हैं:
- एक्सएमएल प्रोसेसिंग के लिए जावा एपीआई (एक्सएमएल प्रोसेसिंग के लिए जावा एपीआई) डोम प्रदाताओं तक पहुंचने के लिए एक एपीआई है
- लज़ारस (आईडीई) (फ़्री पास्कल आईडीई) में डीओएम के दो वेरिएंट हैं - UTF-8 और एएनएसआई फॉर्मेट के साथ
निरीक्षण उपकरण:
- डोम इंस्पेक्टर एक वेब डेवलपर टूल है
यह भी देखें
संदर्भ
- ↑ सभी संस्करण केवल डब्ल्यू3सी डीओएम को संदर्भित करते हैं।
- ↑ "Document Object Model (DOM): definition, structure and example". IONOS Digitalguide (in English). Retrieved 2022-04-21.
- ↑ "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.
- ↑ [1]
- ↑ "DOM Standard". Retrieved 23 September 2016.
- ↑ "W3C Document Object Model". Retrieved 23 September 2016.
- ↑ (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.
- ↑ "PubStatus - WEBAPPS". Retrieved 23 September 2016.
- ↑ "W3C DOM4". Retrieved 8 January 2021.
- ↑ "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.
- ↑ "Modernizing the DOM tree in Microsoft Edge". Microsoft. 19 April 2017. Retrieved 2021-09-12.
- ↑ "JavaScript HTML DOM". Retrieved 23 September 2016.
- ↑ Kogent Solutions Inc. (2008). Ajax Black Book, New Edition (With Cd). Dreamtech Press. p. 40. ISBN 978-8177228380.
- ↑ "XML for <SCRIPT> Cross Platform XML Parser in JavaScript". Retrieved 23 September 2016.
- ↑ "The modern DOM API for PHP 7 projects". 5 December 2021.
सामान्य संदर्भ
- Flanagan, David (2006). जावास्क्रिप्ट: निश्चित गाइड. O'Reilly & Associates. pp. 312–313. ISBN 0-596-10199-6.
- Koch, Peter-Paul (May 14, 2001). "दस्तावेज़ ऑब्जेक्ट मॉडल: एक परिचय". Digital Web Magazine. Archived from the original on April 27, 2017. Retrieved January 10, 2009.
- Le Hégaret, Philippe (2002). "W3C दस्तावेज़ ऑब्जेक्ट मॉडल (DOM)". World Wide Web Consortium. Retrieved January 10, 2009.
- Guisset, Fabian. "प्रत्येक DOM स्तर क्या लाता है?". Mozilla Developer Center. Mozilla Project. Archived from the original on March 2, 2013. Retrieved January 10, 2009.
बाहरी संबंध
- डीओएम Living Standard by the व्हातवग
- Original डब्ल्यू3सी डीओएम hub by the डब्ल्यू3सी डीओएम Working Group (outdated)
- Web Platform Working Group (current steward of डब्ल्यू3सी डीओएम)
