HTML DOM: डॉक्यूमेंट ऑब्जेक्ट मॉडल का उपयोग कैसे करें



यह लेख आपको उदाहरण के साथ HTML डोम, डॉक्यूमेंट ऑब्जेक्ट मॉडल का विस्तृत और व्यापक ज्ञान प्रदान करेगा।

एक दस्तावेज़ ऑब्जेक्ट का प्रतिनिधित्व करता है दस्तावेज़ जो उस विंडो में प्रदर्शित होता है। दस्तावेज़ ऑब्जेक्ट में विभिन्न गुण होते हैं जो अन्य वस्तुओं को संदर्भित करते हैं जो दस्तावेज़ सामग्री तक पहुंच और संशोधन की अनुमति देते हैं। इस लेख में, हम HTML DOM को समझेंगे।

HTML DOM कॉन्सेप्ट

जिस तरह से एक प्रलेखित सामग्री तक पहुँचा और संशोधित किया जाता है उसे कहा जाता है दस्तावेज़ ऑब्जेक्ट मॉडल , या DOM। वस्तुओं को एक पदानुक्रम में व्यवस्थित किया जाता है। यह पदानुक्रमित संरचना एक वेब दस्तावेज़ में वस्तुओं के संगठन पर लागू होती है।





  • विंडो ऑब्जेक्ट और माइनस के शीर्ष। यह वस्तु पदानुक्रम का परम तत्व है।
  • डॉक्यूमेंट ऑब्जेक्ट और माइनस प्रत्येक HTML डॉक्यूमेंट जो एक विंडो में लोड होता है, डॉक्यूमेंट ऑब्जेक्ट बन जाता है। दस्तावेज़ में पृष्ठ की सामग्री शामिल है।
  • फॉर्म ऑब्जेक्ट और माइनस ... टैग में संलग्न सब कुछ फॉर्म ऑब्जेक्ट सेट करता है।
  • प्रपत्र नियंत्रण तत्व और माइनस फॉर्म ऑब्जेक्ट में उस ऑब्जेक्ट के लिए परिभाषित सभी तत्व शामिल होते हैं जैसे कि टेक्स्ट फ़ील्ड, बटन, रेडियो बटन और चेकबॉक्स।

HTML DOM क्या है

दस्तावेज़ ऑब्जेक्ट मॉडल दस्तावेजों के लिए एक प्रोग्रामिंग एपीआई है। ऑब्जेक्ट मॉडल स्वयं बारीकी से दस्तावेज़ों की संरचना जैसा दिखता है। उदाहरण के लिए, एक HTML दस्तावेज़ से ली गई इस तालिका पर विचार करें:

 
छायादार ग्रोव Aeolian
नदी के ऊपर, चार्ली डोरियन

HTML DOM क्या नहीं है

इस खंड को दस्तावेज़ ऑब्जेक्ट मॉडल के अन्य प्रणालियों से अलग होने के बारे में अधिक सटीक समझ देने के लिए डिज़ाइन किया गया है जो ऐसा लग सकता है।



हालाँकि डॉक्यूमेंट ऑब्जेक्ट मॉडल स्तर 1 में डायनेमिक HTML से बहुत प्रभावित था, लेकिन यह डायनेमिक HTML के सभी को लागू नहीं करता है। विशेष रूप से, घटनाओं को अभी तक परिभाषित नहीं किया गया है। स्तर 1 को इस तरह की कार्यक्षमता के लिए एक मजबूत नींव रखने के लिए डिज़ाइन किया गया है, जो दस्तावेज़ का एक मजबूत, लचीला मॉडल प्रदान करता है।

जावा में ट्रिम कैसे करें

दस्तावेज़ ऑब्जेक्ट मॉडल एक बाइनरी विनिर्देश नहीं है। एक ही भाषा में लिखे गए डॉक्यूमेंट ऑब्जेक्ट मॉडल प्रोग्राम प्लेटफ़ॉर्म के पार स्रोत कोड संगत होंगे, लेकिन दस्तावेज़ ऑब्जेक्ट मॉडल बाइनरी इंटरऑपरेबिलिटी के किसी भी रूप को परिभाषित नहीं करता है।

दस्तावेज़ ऑब्जेक्ट मॉडल XML या HTML के लिए वस्तुओं को बनाए रखने का एक तरीका नहीं है। XML में ऑब्जेक्ट्स का प्रतिनिधित्व कैसे किया जा सकता है, यह निर्दिष्ट करने के बजाय, डॉक्यूमेंट ऑब्जेक्ट मॉडल निर्दिष्ट करता है कि XML और HTML दस्तावेज़ों को ऑब्जेक्ट्स के रूप में कैसे दर्शाया जाता है, ताकि उनका उपयोग ऑब्जेक्ट-ओरिएंटेड प्रोग्राम में किया जा सके।



HTML DOM नहीं है

दस्तावेज़ ऑब्जेक्ट मॉडल डेटा संरचनाओं का एक सेट नहीं है, यह एक ऑब्जेक्ट मॉडल है जो इंटरफेस को निर्दिष्ट करता है। यद्यपि इस दस्तावेज़ में माता-पिता / बच्चे के संबंधों को दर्शाने वाले चित्र हैं, लेकिन ये प्रोग्रामिंग इंटरफेस द्वारा परिभाषित तार्किक संबंध हैं, किसी विशेष आंतरिक संरचना संरचनाओं का प्रतिनिधित्व नहीं करते हैं।

दस्तावेज़ ऑब्जेक्ट मॉडल XML या HTML के 'सही आंतरिक शब्दार्थ' को परिभाषित नहीं करता है। उन भाषाओं के शब्दार्थ स्वयं भाषाओं द्वारा परिभाषित होते हैं।

द डॉक्यूमेंट ऑब्जेक्ट मॉडल एक प्रोग्रामिंग मॉडल है जिसे इन शब्दार्थों का सम्मान करने के लिए डिज़ाइन किया गया है। डॉक्यूमेंट ऑब्जेक्ट मॉडल में आपके द्वारा XML और HTML डॉक्यूमेंट लिखने के किसी भी प्रकार का कोई प्रभाव नहीं होता है, जिसे इन भाषाओं में लिखा जा सकता है, डॉक्यूमेंट ऑब्जेक्ट मॉडल में दर्शाया जा सकता है।

द डॉक्यूमेंट ऑब्जेक्ट मॉडल, इसके नाम के बावजूद, कंपोनेंट ऑब्जेक्ट मॉडल (COM) का प्रतियोगी नहीं है। COM, CORBA की तरह, इंटरफेस और ऑब्जेक्ट्स निर्दिष्ट करने के लिए एक भाषा स्वतंत्र तरीका है दस्तावेज़ ऑब्जेक्ट मॉडल HTML और XML दस्तावेजों के प्रबंधन के लिए डिज़ाइन किए गए इंटरफेस और ऑब्जेक्ट का एक सेट है। डोम हो सकता हैCOM या CORBA जैसी भाषा-स्वतंत्र प्रणालियों का उपयोग करके इसे इस दस्तावेज़ में निर्दिष्ट जावा या ECMAScript बाइंडिंग जैसे भाषा-विशिष्ट बाइंडिंग का उपयोग करके भी लागू किया जा सकता है।

जहां दस्तावेज़ ऑब्जेक्ट मॉडल से आया था

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

हालाँकि, जब डॉक्यूमेंट ऑब्जेक्ट मॉडल वर्किंग ग्रुप का गठन किया गया था, तो यह HTML या XML संपादकों और दस्तावेज़ सूचनाओं सहित अन्य डोमेन में विक्रेताओं द्वारा भी शामिल किया गया था। एक्सएमएल के विकसित होने से पहले इनमें से कई विक्रेताओं ने एसजीएमएल के साथ काम किया था, दस्तावेज़ ऑब्जेक्ट मॉडल एसजीएमएल ग्रोव्स और हायटाइम मानक से प्रभावित रहा है। इनमें से कुछ विक्रेताओं ने प्रदान करने के लिए दस्तावेजों के लिए अपने स्वयं के ऑब्जेक्ट मॉडल भी विकसित किए थेSGML / XML संपादकों या दस्तावेज़ रिपॉजिटरी के लिए प्रोग्रामिंग एपीआई, और इन ऑब्जेक्ट मॉडल ने दस्तावेज़ ऑब्जेक्ट मॉडल को भी प्रभावित किया है।

HTML DOM के गुण

आइए उन दस्तावेज़ वस्तुओं के गुणों को देखें जिन्हें दस्तावेज़ ऑब्जेक्ट द्वारा एक्सेस और संशोधित किया जा सकता है।

DOM-Graph
  1. विंडो ऑब्जेक्ट: विंडो ऑब्जेक्ट हमेशा पदानुक्रम के शीर्ष पर होता है।
  2. दस्तावेज़ वस्तु: जब एक HTML डॉक्यूमेंट को विंडो में लोड किया जाता है, तो यह डॉक्यूमेंट ऑब्जेक्ट बन जाता है।
  3. फॉर्म ऑब्जेक्ट: यह द्वारा प्रतिनिधित्व किया है प्रपत्र टैग।
  4. लिंक ऑब्जेक्ट: यह द्वारा प्रतिनिधित्व किया है संपर्क टैग।
  5. लंगर की वस्तुएँ: यह द्वारा प्रतिनिधित्व किया है एक href टैग।
  6. प्रपत्र नियंत्रण तत्व: प्रपत्र में कई नियंत्रण तत्व हो सकते हैं जैसे टेक्स्ट फ़ील्ड, बटन, रेडियो बटन, और चेकबॉक्स इत्यादि।

तरीके दस्तावेज़ वस्तु का :

सेलेनियम का उपयोग करके क्रॉस ब्राउज़र परीक्षण
  1. लिखना ('स्ट्रिंग'): दस्तावेज़ पर दिए गए स्ट्रिंग को लिखते हैं।
  2. getElementById (): दिए गए आईडी मान वाले तत्व को वापस करता है।
  3. getElementsByName (): दिए गए नाम मान वाले सभी तत्वों को लौटाता है।
  4. getElementsByTagName (): दिए गए टैग नाम वाले सभी तत्वों को लौटाता है।
  5. getElementsByClassName (): दिए गए वर्ग के नाम वाले सभी तत्वों को लौटाता है।

HTML तत्वों का पता लगाना

जब आप जावास्क्रिप्ट के साथ HTML तत्वों का उपयोग करना चाहते हैं, तो आपको पहले तत्वों को खोजना होगा।

ऐसा करने के कुछ तरीके हैं:

  • आईडी द्वारा HTML तत्वों का पता लगाना
  • HTML तत्वों को टैग नाम से खोजना
  • HTML तत्वों को वर्ग नाम से खोजना

आईडी द्वारा HTML तत्व ढूँढना

DOM में HTML एलिमेंट खोजने का सबसे आसान तरीका है, एलिमेंट आईडी का उपयोग करके।

उदाहरण

टैग नाम से HTML तत्वों को खोजना

यह उदाहरण आईडी = 'मुख्य' के साथ तत्व को पाता है, और फिर सभी को पाता है

'मुख्य' के अंदर के तत्व:

इसके साथ, हम इस HTML DOM लेख के अंत में आते हैं। मुझे उम्मीद है कि आपको HTML DOM, Document Object Model के विभिन्न पहलुओं की समझ मिल गई होगी।

हमारी जाँच करें जो प्रशिक्षक के नेतृत्व वाले लाइव प्रशिक्षण और वास्तविक जीवन की परियोजना के अनुभव के साथ आता है। यह प्रशिक्षण आपको बैक-एंड और फ्रंट-एंड वेब तकनीकों के साथ काम करने के लिए कौशल में कुशल बनाता है। इसमें वेब डेवलपमेंट, jQuery, Angular, NodeJS, ExpressJS और MongoDB पर प्रशिक्षण शामिल है।

क्या आप हमसे कोई प्रश्न पूछना चाहते हैं? कृपया 'HTML Images' ब्लॉग के कमेंट सेक्शन में इसका उल्लेख करें और हम आपके पास वापस आएँगे।