दस्तावेज़ ऑब्जेक्ट मॉडल, या "DOM", वेब पेजों के तत्वों तक पहुँचने के लिए एक प्रोग्रामिंग इंटरफ़ेस है। मूल रूप से, यह एक पृष्ठ एपीआई है जो आपको पृष्ठ की सामग्री, संरचना और शैलियों को पढ़ने और हेरफेर करने की अनुमति देता है। आइए देखें कि यह कैसे काम करता है और यह कैसे काम करता है।

वेब पेज कैसे बनाया जाता है?

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

पहले चरण के परिणाम को "रेंडर ट्री" कहा जाता है। वृक्ष का पेड़ HTML तत्वों का एक प्रतिनिधित्व है जो पृष्ठ पर प्रदर्शित किया जाएगा, और उनकी संबंधित शैलियों। इस पेड़ को बनाने के लिए, ब्राउज़र को दो चीजों की आवश्यकता होती है:

1. CSSOM, तत्वों से जुड़ी शैलियों की प्रस्तुति
2. डोम, तत्व प्रतिनिधित्व

DOM क्या बना है?

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

DOM ऑब्जेक्ट्स की संरचना को "नोड्स का पेड़" कहा जाता है। यह इसलिए कहा जाता है क्योंकि यह एक एकल माता-पिता के साथ एक पेड़ के रूप में सोचा जा सकता है जो कई बच्चे शाखाओं में बाहर निकलते हैं, जिनमें से प्रत्येक में पत्तियां हो सकती हैं। इस मामले में, मूल "तत्व" मूल तत्व है, बच्चे "शाखाएं" नेस्टेड तत्व हैं, और "पत्तियां" तत्वों के भीतर सामग्री हैं।

आइए इस HTML दस्तावेज़ को एक उदाहरण के रूप में लेते हैं:

नमस्ते दुनिया!

क्या हाल है?

इस दस्तावेज़ को निम्न नोड ट्री के रूप में दर्शाया जा सकता है:

• एचटीएमएल
  • सिर
    • शीर्षक
      • मेरा पहला वेब पेज
  • तन
    • h1
      • नमस्ते दुनिया!
    • पी
      • क्या हाल है?

DOM क्या नहीं है

ऊपर दिए गए उदाहरण में, DOM मूल HTML दस्तावेज़ का 1: 1 मैपिंग प्रतीत होता है। हालाँकि, जैसा कि मैंने कहा, मतभेद हैं। डोम क्या है, इसे पूरी तरह से समझने के लिए, हमें यह देखने की जरूरत है कि यह क्या नहीं है।

DOM मूल HTML की एक प्रति नहीं है

यद्यपि DOM एक HTML डॉक्यूमेंट से बनाया गया है, लेकिन यह हमेशा एक जैसा नहीं होता है। ऐसे दो मामले हैं जिनमें DOM मूल HTML से भिन्न हो सकता है।

1. जब HTML में मार्कअप त्रुटियां होती हैं

DOM एक HTML डॉक्यूमेंट के वास्तविक (अर्थात पहले से रेंडर) तत्वों तक पहुँचने के लिए इंटरफ़ेस है। DOM बनाने की प्रक्रिया में, ब्राउज़र खुद ही HTML कोड में कुछ त्रुटियों को ठीक कर सकता है।

एक उदाहरण के रूप में इस HTML दस्तावेज़ पर विचार करें:

नमस्ते दुनिया!

दस्तावेज़ लापता तत्व है तथा जो HTML के लिए आवश्यक है। लेकिन यदि हम परिणामी DOM वृक्ष को देखते हैं, तो हम देख सकते हैं कि यह तय हो गया है:

• एचटीएमएल
  • सिर
  • तन
    • नमस्ते दुनिया!

  2. जब जावास्क्रिप्ट को जावास्क्रिप्ट द्वारा संशोधित किया जाता है

  एक HTML दस्तावेज़ की सामग्री को देखने के लिए एक इंटरफ़ेस होने के अलावा, DOM को भी संशोधित किया जा सकता है।

  उदाहरण के लिए, हम जावास्क्रिप्ट का उपयोग करके DOM के लिए अतिरिक्त नोड बना सकते हैं।

  वार newParagraph \u003d document.createElement ("p"); var paragraphContent \u003d document.createTextNode ("मैं" नया हूँ!);

  यह कोड DOM को बदल देगा, लेकिन HTML दस्तावेज़ में परिवर्तन दिखाई नहीं देंगे।

  DOM वह नहीं है जो आप ब्राउज़र में देखते हैं (अर्थात रेंडर ट्री)

  ब्राउज़र व्यूपोर्ट में, आप रेंडर ट्री देखते हैं, जैसा कि मैंने कहा, DOM और CSSOM का संयोजन है। DOM और रेंडर ट्री के बीच अंतर यह है कि बाद में केवल वही होता है जो अंततः स्क्रीन पर प्रदर्शित होता है।

  चूंकि रेंडर ट्री केवल वही प्रदर्शित करता है जो प्रदर्शित होता है, यह उन वस्तुओं को बाहर करता है जो नेत्रहीन छिपी हुई हैं। उदाहरण के लिए, ऐसे तत्व जिनके पास शैलियाँ हैं कुछ भी डिस्प्ले मत करो.

  नमस्ते दुनिया!

  क्या हाल है?

  DOM में तत्व शामिल होगा

  • एचटीएमएल
    • सिर
    • तन
      • h1
        • नमस्ते दुनिया!
      • पी
        • क्या हाल है?

  हालाँकि, रेंडर ट्री, और इसलिए व्यूपोर्ट में जो दिखाई दे रहा है, वह इस मद में शामिल नहीं किया जाएगा।

  • एचटीएमएल
    • तन
      • h1
        • नमस्ते दुनिया!

  DOM वह नहीं है जो DevTools में प्रदर्शित होता है

  यह अंतर थोड़ा छोटा है क्योंकि DevTools Element Inspector एक ब्राउज़र में हमारे पास मौजूद DOM को निकटतम सन्निकटन प्रदान करता है। हालाँकि, DevTools निरीक्षक में अतिरिक्त जानकारी होती है जो DOM में नहीं है।

  इसका सबसे अच्छा उदाहरण CSS pseudo-elements हैं। चयनकर्ताओं का उपयोग करके छद्म तत्व बनाए गए :: इससे पहले तथा :: उपरांतCSSOM और रेंडर ट्री का हिस्सा हैं, लेकिन तकनीकी रूप से DOM का हिस्सा नहीं हैं। ऐसा इसलिए है क्योंकि DOM केवल मूल HTML डॉक्यूमेंट से जेनरेट होता है, एलिमेंट पर लागू शैलियों को शामिल नहीं करता है।

  यद्यपि छद्म तत्व DOM का हिस्सा नहीं हैं, लेकिन वे हमारे devtools तत्व निरीक्षक में हैं।

  
  

  सारांश

  DOM एक HTML डॉक्यूमेंट का इंटरफ़ेस है। यह ब्राउज़र में पेज के कंटेंट, स्ट्रक्चर या स्टाइल को बदलने के लिए व्यूपोर्ट में रेंडर करने के लिए और जावास्क्रिप्ट कोड द्वारा निर्धारित करने के पहले चरण के रूप में उपयोग किया जाता है।

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

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

HTML शब्दावली

HTML और जावास्क्रिप्ट को समझना डोम के साथ काम करने के लिए महत्वपूर्ण है। चलो मूल शब्दों पर एक नज़र डालते हैं।

इस HTML तत्व को देखें:

घर

इसमें एक एंकर होता है, जो index.html का लिंक होता है।

• टैग
• href - विशेषता
• html - गुण मान
• घर - पाठ।

उद्घाटन और समापन टैग के बीच सब कुछ एक HTML तत्व का गठन करता है।

आइए पिछले ट्यूटोरियल से index.html फ़ाइल पर वापस जाएँ:

दस्तावेज़ ऑब्जेक्ट मॉडल

जावास्क्रिप्ट के साथ एक तत्व तक पहुंचने का सबसे आसान तरीका आईडी विशेषता के साथ है। आइए उपरोक्त लिंक को आईडी \u003d "नेवी" के साथ हमारी index.html फ़ाइल में जोड़ें।

...

दस्तावेज़ ऑब्जेक्ट मॉडल

घर

...

ब्राउज़र विंडो में पेज लोड (या रिफ्रेश) करें और सुनिश्चित करें कि कोड अपडेट किया गया है।

फिर संपूर्ण तत्व तक पहुंचने के लिए getElementById () विधि का उपयोग करें। कंसोल में निम्न दर्ज करें:

document.getElementById ("नौसेना");
घर

GetElementById () विधि पूरे तत्व को पुनः प्राप्त करेगी। अब, इस ऑब्जेक्ट और विधि को दर्ज करने के बजाय आपको हर बार नौसेना लिंक तक पहुंचने की आवश्यकता होती है, तो आप तत्व को एक चर में डाल सकते हैं ताकि इसके साथ काम करना आसान हो सके।

let navLink \u003d document.getElementById ("नौसेना");

नेवलिंक चर में एंकर होता है। यहां आप आसानी से विशेषताओं और मूल्यों को बदल सकते हैं। उदाहरण के लिए, लिंक का स्थान बदलने के लिए, href विशेषता बदलें:

navLink.href \u003d "https://www.wikipedia.org";

आप पाठ को पुन: असाइन करके टेक्स्ट को बदल भी सकते हैं

navLink.textContent \u003d "विकिपीडिया पर नेविगेट करें";

अब, इस तत्व को कंसोल में देखकर या तत्वों के टैग की जाँच करके, आप देख सकते हैं कि यह कैसे अद्यतन किया गया है।

navLink;
विकिपीडिया पर नेविगेट करें

बदलाव सामने के छोर पर भी परिलक्षित होंगे।

पृष्ठ को ताज़ा करने से सभी मूल मूल्य वापस आ जाएंगे।

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

डोम ट्री और नोड्स

DOM में सभी तत्वों को नोड के रूप में परिभाषित किया गया है। कई प्रकार के नोड हैं, लेकिन तीन मुख्य हैं जिन्हें आप सबसे अधिक बार काम करेंगे:

1. तत्व नोड
2. पाठ नोड
3. टिप्पणी नोड

जब एक HTML तत्व DOM में एक तत्व होता है, तो इसे एक तत्व नोड कहा जाता है। किसी तत्व के बाहर कोई एकल पाठ एक पाठ नोड है, और एक HTML टिप्पणी एक टिप्पणी नोड है। इन तीन प्रकार के नोड्स के अलावा, दस्तावेज़ ऑब्जेक्ट स्वयं एक दस्तावेज़ नोड है, जो अन्य सभी नोड्स का रूट नोड है।

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

उदाहरण के लिए, एक फाइल बनाएं nodes.html। इसमें एक टेक्स्ट नोड जोड़ें, साथ ही टिप्पणी और तत्व नोड्स।

एक तत्व नोड

एक पाठ नोड।

Html एलिमेंट नोड अभिभावक है। सिर और शरीर html के बाल नोड हैं। शरीर में तीन बच्चे नोड होते हैं, और वे सभी एक ही स्तर पर होते हैं - नोड का प्रकार घोंसले के स्तर को प्रभावित नहीं करता है।

ध्यान दें: जब HTML उत्पन्न डोम के साथ काम करता है, तो HTML स्रोत इंडेंटेशन कई खाली टेक्स्ट नोड बनाता है जो DevTools Elements टैब में दिखाई नहीं देगा। इस बारे में अधिक लिंक पर।

नोड प्रकार का निर्धारण

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

डेवलपर टूल में एलिमेंट्स टैब में, आप देख सकते हैं कि जब भी आप क्लिक करते हैं और DOM में किसी लाइन को चुनते हैं, तो उसके आगे मान \u003d\u003d $ 0 दिखाई देता है। वर्तमान में सक्रिय आइटम तक पहुंचने का यह एक बहुत ही सुविधाजनक तरीका है।

नोड.html कंसोल में, शरीर में पहले तत्व (h1) पर क्लिक करें।

नोड टाइप प्रॉपर्टी का उपयोग करके चयनित नोड के प्रकार का पता लगाने के लिए कंसोल का उपयोग करें।

$ 0.nodeType;
1

H1 तत्व का चयन करके, आप 1 को आउटपुट के रूप में देखेंगे जो ELEMENT_NODE को संदर्भित करता है। अन्य नोड्स के साथ भी ऐसा ही करें और वे क्रमशः 3 और 8 वापस आएंगे।

किसी तत्व तक पहुंचने का तरीका जानने के द्वारा, आप DOM में तत्वों को हाइलाइट किए बिना नोड के प्रकार को देख सकते हैं।

document.body.nodeType;
1

नोडटाइप के अलावा, आप किसी तत्व का टैग प्राप्त करने के लिए किसी पाठ या टिप्पणी नोड के मूल्य का पता लगाने के लिए नोड नोड का उपयोग भी कर सकते हैं और नोडनेम का उपयोग कर सकते हैं।

ईवेंट का उपयोग करके DOM को बदलना

अब तक, आपने देखा है कि कंसोल में DOM कैसे बदला जाता है, और इन परिवर्तनों को अस्थायी माना जाता है; जब भी पृष्ठ ताज़ा होता है, सभी परिवर्तन खो जाते हैं। आपने कंसोल में पेज का बैकग्राउंड कलर अपडेट किया है। इस ट्यूटोरियल में जो आपने सीखा है उसे संयोजित करने का प्रयास करें जो आप पहले से ही एक इंटरैक्टिव बटन बनाने के लिए जानते हैं जो पृष्ठभूमि का रंग बदलता है।

अपनी index.html फ़ाइल पर वापस जाएं और एक आईडी के साथ एक बटन तत्व जोड़ें। आपको नई js निर्देशिका js / script.js में नई फ़ाइल के लिए एक लिंक जोड़ने की भी आवश्यकता है।

दस्तावेज़ ऑब्जेक्ट मॉडल

पृष्ठभूमि का रंग बदलें

जावास्क्रिप्ट में एक घटना एक क्रिया है जो एक उपयोगकर्ता लेता है। उपयोगकर्ता एक तत्व पर माउस को घुमाता है, उस पर क्लिक करता है या कीबोर्ड पर एक निश्चित कुंजी पर - ये सभी घटनाएं हैं। इस विशेष मामले में, उपयोगकर्ता को उस पर क्लिक करने पर बटन पर कार्रवाई करनी चाहिए। ऐसा करने के लिए, आपको एक इवेंट श्रोता जोड़ना होगा। एक script.js फ़ाइल बनाएँ और इसे एक नई js निर्देशिका में सहेजें। फ़ाइल में, आपको एक बटन तत्व को परिभाषित करने और इसे एक चर पर असाइन करने की आवश्यकता है।

AddEventListener () पद्धति का उपयोग करके, बटन क्लिक के लिए सुनेंगे और क्लिक के बाद इसके कार्य को निष्पादित करेंगे।

...
button.addEventListener ("क्लिक", () \u003d\u003e ()
// यहां कार्रवाई होगी
});

फ़ंक्शन के अंदर, आपको पृष्ठभूमि के रंग को फ्यूशिया में बदलने के लिए पिछले मैनुअल से कोड डालना होगा।

...

यह स्क्रिप्ट कैसी दिखती है:

let बटन \u003d document.getElementById ("changeBackground");
button.addEventListener ("क्लिक", () \u003d\u003e ()
document.body.style.backgroundColor \u003d "फ्यूशिया";
});

फ़ाइल को सहेजें और बंद करें। अपने ब्राउज़र में index.html पेज को रिफ्रेश करें। नए बटन पर क्लिक करें और पृष्ठ की पृष्ठभूमि का रंग बदल जाएगा।

टैग :,

इस ट्यूटोरियल में, हम देखेंगे कि DOM क्या है, इसकी आवश्यकता क्यों है, और यह कैसे बनाया गया है।

DOM क्या है?

जब कोई ब्राउज़र पृष्ठ का अनुरोध करता है और सर्वर से प्रतिक्रिया में अपना HTML स्रोत प्राप्त करता है, तो उसे पहले इसे पार्स करना चाहिए। HTML कोड के विश्लेषण और पार्सिंग की प्रक्रिया में, ब्राउज़र इसके आधार पर DOM ट्री बनाता है।

इस क्रिया और कई अन्य कार्यों को पूरा करने के बाद, ब्राउज़र पृष्ठ को प्रस्तुत करना शुरू करता है। इस प्रक्रिया में, निश्चित रूप से, वह पहले से ही बनाए गए DOM ट्री का उपयोग करता है, मूल HTML कोड का नहीं।

DOM एक डॉक्यूमेंट ऑब्जेक्ट मॉडल है जो ब्राउज़र कंप्यूटर में मेमोरी बनाता है जो HTML कोड के आधार पर सर्वर से प्राप्त होता है।

सरल शब्दों में, HTML पृष्ठ का पाठ है, और DOM अपने पाठ को पार्स करते समय ब्राउज़र द्वारा बनाई गई संबंधित वस्तुओं का एक समूह है।

Chrome में, ब्राउज़र को प्राप्त होने वाले पृष्ठ का स्रोत कोड वेब डेवलपर टूल पैनल के स्रोत टैब में देखा जा सकता है।

Chrome के पास DOM ट्री को देखने के लिए एक उपकरण नहीं है जिसे उसने बनाया है। लेकिन एचटीएमएल-कोड के रूप में इस डोम-ट्री का एक प्रतिनिधित्व है, यह "एलिमेंट्स" टैब पर उपलब्ध है। यह DOM प्रतिनिधित्व, निश्चित रूप से, वेब डेवलपर के साथ काम करने के लिए बहुत अधिक सुविधाजनक है। इसलिए, ऐसा कोई उपकरण नहीं है जो वृक्ष की संरचना के रूप में DOM का प्रतिनिधित्व करेगा।

इस मॉडल में ऑब्जेक्ट HTML (टैग, पाठ सामग्री, टिप्पणियाँ, आदि) में लगभग सभी चीजों से बनते हैं, जिसमें दस्तावेज़ भी शामिल है। मॉडल में इन ऑब्जेक्ट्स के बीच कनेक्शन कैसे के आधार पर बनते हैं HTML तत्व एक दूसरे के सापेक्ष कोड में स्थित हैं.

इस मामले में, इसके गठन के बाद दस्तावेज़ के डोम को बदला जा सकता है। जब DOM बदलता है, ब्राउज़र पृष्ठ छवि को लगभग तुरंत बदल देता है। नतीजतन, हमारे पास है पेज रेंडरिंग हमेशा DOM से मेल खाता है.

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

ज्यादातर मामलों में, जावास्क्रिप्ट का उपयोग डोम के साथ काम करने के लिए किया जाता है। आज यह एकमात्र प्रोग्रामिंग भाषा है जिसे एक ब्राउज़र में स्क्रिप्ट किया जा सकता है।

हमें DOM API की आवश्यकता क्यों है? हमें इसकी आवश्यकता है ताकि हम जावास्क्रिप्ट का उपयोग करके मक्खी पर पेज को बदल सकें। इसे गतिशील और संवादात्मक बनाएं।

DOM API हमें (डेवलपर्स) बड़ी संख्या में तरीके प्रदान करता है, जिसके साथ हम पेज पर सब कुछ बदल सकते हैं, साथ ही उपयोगकर्ता के साथ बातचीत भी कर सकते हैं। उन। यह प्रोग्रामिंग इंटरफ़ेस हमें जटिल इंटरफेस बनाने, फॉर्म बनाने, उपयोगकर्ता कार्यों को संसाधित करने, पेज पर विभिन्न तत्वों को जोड़ने और हटाने, उनकी सामग्री, गुण (विशेषताएं), और बहुत कुछ बदलने की अनुमति देता है।

आजकल स्क्रिप्ट में वेब पर व्यावहारिक रूप से कोई साइट नहीं है जो DOM के साथ काम नहीं करेगी।

पृष्ठ के HTML में क्या शामिल है?

दस्तावेज़ ऑब्जेक्ट मॉडल के अध्ययन पर जाने से पहले, आपको पहले यह याद रखना होगा कि वेब पेज (HTML दस्तावेज़) का स्रोत कोड क्या है।

एक वेब पेज के स्रोत कोड में टैग, विशेषताएँ, टिप्पणियां और पाठ शामिल हैं। टैग मूल HTML सिंटैक्स हैं। उनमें से ज्यादातर जोड़े हैं। इस मामले में, उनमें से एक उद्घाटन एक है, और दूसरा समापन एक है। टैग की एक ऐसी जोड़ी एक HTML तत्व बनाती है। HTML तत्वों में अतिरिक्त पैरामीटर हो सकते हैं - विशेषताएँ।

एक दस्तावेज में, एक निश्चित मार्कअप बनाने के लिए, कुछ तत्व दूसरों के अंदर होते हैं। नतीजतन, एक HTML दस्तावेज़ नेस्टेड HTML तत्वों के एक सेट के रूप में सोचा जा सकता है।

एक उदाहरण के रूप में, निम्न HTML कोड पर विचार करें:

लेख का शीर्षक

इस कोड में, मूल तत्व html है। इसमें सिर और शरीर के तत्व निहित हैं। शीर्ष तत्व में शीर्षक होता है, और शरीर में h1 और div होता है। बदले में div तत्व में h2 और p शामिल हैं।

अब देखते हैं कि HTML कोड के आधार पर एक ब्राउज़र DOM ट्री कैसे बनाता है।

दस्तावेज़ का DOM ट्री कैसे बनाया जाता है?

जैसा कि ऊपर वर्णित है, ब्राउज़र पृष्ठ के स्रोत कोड के HTML तत्वों और अन्य संस्थाओं के आधार पर एक पेड़ बनाता है। इस प्रक्रिया को करते समय, यह एक दूसरे के भीतर तत्वों के घोंसले को ध्यान में रखता है।

नतीजतन, ब्राउज़र परिणामी DOM पेड़ का उपयोग न केवल अपने काम में करता है, बल्कि हमें जावास्क्रिप्ट के माध्यम से सुविधाजनक कार्य के लिए एपीआई भी प्रदान करता है।

DOM का निर्माण करते समय, ब्राउज़र HTML भाषा के तत्वों, पाठ, टिप्पणियों और अन्य संस्थाओं से (DOM ट्री के नोड्स) ऑब्जेक्ट्स बनाता है।

ज्यादातर मामलों में, वेब डेवलपर्स केवल HTML तत्वों से बने ऑब्जेक्ट्स (नोड्स) में रुचि रखते हैं।

उसी समय, ब्राउज़र न केवल HTML तत्वों से ऑब्जेक्ट बनाता है, बल्कि उन्हें कुछ लिंक के साथ एक-दूसरे से जोड़ता है, इस पर निर्भर करता है कि उनमें से प्रत्येक कोड में दूसरे से कैसे संबंधित है।

तत्व जो सीधे किसी तत्व में हैं वे इसके संबंध में बच्चे हैं। और वह उनमें से प्रत्येक के लिए एक अभिभावक है। इसके अलावा, एक दूसरे के संबंध में ये सभी तत्व भाई-बहन (भाई) हैं।

इसके अलावा, HTML में, किसी भी तत्व में हमेशा एक पैरेंट (HTML तत्व जिसमें वह सीधे स्थित होता है) होता है। HTML में, एक तत्व में कई माता-पिता नहीं हो सकते। एकमात्र अपवाद html तत्व है। उसका कोई माता-पिता नहीं है।

DOM ट्री को ब्राउज़र के रूप में प्राप्त करने के लिए, आपको बस एक दूसरे के साथ उनके रिश्ते के आधार पर सभी तत्वों को "लाइन अप" करने की आवश्यकता है।

DOM ट्री क्रिएशन ऊपर से नीचे तक किया जाता है।

इस मामले में, DOM ट्री की जड़ हमेशा स्वयं दस्तावेज (दस्तावेज नोड) है। इसके अलावा, ट्री HTML कोड की संरचना के आधार पर बनाया गया है।

उदाहरण के लिए, ऊपर हमने जो HTML कोड देखा, उसमें निम्नलिखित DOM ट्री होगा:

इस पेड़ के सबसे ऊपरी भाग पर दस्तावेज़ नोड है। यह नोड html से संबंधित है, यह उसका बच्चा है। Html नोड html एलिमेंट द्वारा बनता है ( ...)। हेड नोड्स ( ...) और शरीर ( ...) html के लिए एक मूल लिंक है। एक-दूसरे के संबंध में, वे भाई-बहन हैं, क्योंकि एक माता-पिता हैं सिर का नोड शीर्षक के साथ जुड़ा हुआ है (lt; शीर्षक\u003e ...), वह उनका बच्चा है। H1 और div नोड्स शरीर के साथ जुड़े हुए हैं, जिसके लिए यह माता-पिता हैं। Div नोड h2 से जुड़ा हुआ है (

...

) और पी (), वे उसके बच्चे हैं।

वृक्ष शुरू होता है, जैसा कि ऊपर उल्लेख किया गया है, दस्तावेज़ ऑब्जेक्ट (नोड) से। यह बदले में, html तत्व द्वारा गठित एक बच्चा नोड है, ( ...)। प्रमुख तत्व ( ...) और शरीर ( ...) html में हैं और इसलिए इसके बच्चे हैं। इसके अलावा, हेड नोड शीर्षक (lt; टाइटल\u003e\u003e के जनक है ...)। H1 और div तत्वों का शरीर के भीतर घोंसला है, इसलिए वे इसके बच्चे हैं। Div में सीधे h2 तत्व हैं (

...

) और पी ()। इसका मतलब यह है कि उनमें से प्रत्येक के लिए div नोड अभिभावक है।

HTML कोड के आधार पर ब्राउज़र में DOM ट्री बनाना कितना आसान है।

आपको यह जानने की आवश्यकता क्यों है कि DOM ट्री कैसे बनाया जाता है? सबसे पहले, यह उस वातावरण की समझ है जिसमें आप कुछ बदलना चाहते हैं। दूसरे, DOM के साथ काम करते समय अधिकांश क्रियाएं आवश्यक तत्वों को खोजने (चयन करने) के लिए उबालती हैं। यह नहीं पता है कि डोम ट्री कैसे काम करता है और नोड्स के बीच संबंध हैं, बल्कि इसमें एक विशिष्ट तत्व ढूंढना मुश्किल होगा।

काम

चित्र में दिखाए गए DOM ट्री के आधार पर, HTML कोड बनाएं।

विषय वास्तव में जटिल है। लेकिन, जैसा कि वे कहते हैं, शैतान इतना भयानक नहीं है जितना कि वह चित्रित है। यह वह जगह है जहां दरार करने के लिए कठिन अखरोट मेरे पास आता है: "पेंटिंग" का एक प्रकार का सुपर-कार्य जितना संभव हो उतना पचने योग्य है, लेकिन पूरी तरह से आदिम नहीं है। अब तक, मैंने जो भी सामग्री पढ़ी है, वे या तो ज़ुम या आदिम हैं।

DOM क्या है?

संक्षिप्त डोम के लिए खड़ा है दस्तावेज़ ऑब्जेक्ट मॉडल (डॉक्यूमेंट ऑब्जेक्ट मॉडल)।

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

इतिहास का हिस्सा

4 स्तर हैं डोम (0, 1, 2 और 3)।

स्तर ०(1996) में मॉडल शामिल थे डोमजो स्तर 1 से पहले मौजूद थे। ये मुख्य रूप से संग्रह हैं: document.images, document.forms, document.layers और document.all। ये मॉडल औपचारिक रूप से विशिष्ट नहीं हैं। डोमप्रकाशित W3C... इसके बजाय, वे मानकीकरण प्रक्रिया शुरू होने से पहले मौजूद चीजों के बारे में जानकारी प्रदान करते हैं।

स्तर 1 (1997) में एक्सएमएल दस्तावेजों के प्रसंस्करण के लिए बुनियादी कार्यक्षमता भी शामिल थी: व्यक्तिगत नोड्स के साथ काम करने के कई तरीके, एक्सएमएल प्रसंस्करण निर्देशों के साथ काम करना आदि।

के अतिरिक्त, डोम लेवल 1 में कई विशेष इंटरफेस होते हैं जो व्यक्तिगत HTML तत्वों को संभाल सकते हैं। उदाहरण के लिए, आप HTML तालिकाओं, प्रपत्रों, सूचियों का चयन, और बहुत कुछ कर सकते हैं।

में डोम स्तर २ (2002) ने कई नई सुविधाएँ जोड़ीं।

मैं फ़िन डोम स्तर 1 में नामस्थान समर्थन, इंटरफेस की कमी थी डोम स्तर 2 में XML दस्तावेजों की रचना और प्रसंस्करण के लिए आवश्यकताओं से जुड़े नामस्थानों के प्रबंधन के तरीके हैं।

के अतिरिक्त, डोम स्तर 2 घटनाओं का समर्थन करता है।

स्तर 2 वर्तमान विनिर्देश स्तर है डोम, तथापि W3C स्तर 3 विनिर्देशन के कुछ वर्गों की सिफारिश करता है।

DOM स्तर 3 एक विनिर्देश का कार्यशील ड्राफ्ट है जो कार्यक्षमता का विस्तार करता है डोम स्तर 2. विनिर्देश के इस संस्करण की सबसे महत्वपूर्ण विशेषताओं में से कई एक्सटेंशन के साथ काम करने की क्षमता है डोम.

सॉफ्टवेयर इंटरफ़ेस का क्या अर्थ है?

अंग्रेज़ी शब्द इंटरफेस "संपर्क क्षेत्र" के रूप में अनुवादित किया जा सकता है। एक कंप्यूटर, मोटे तौर पर बोलना, केवल दो चीजों को समझता है: एक खाली सा और भरा हुआ सा। कंप्यूटर द्वारा बोली जाने वाली भाषा को शून्य और लोगों के एक अंतहीन स्ट्रिंग के रूप में सोचा जा सकता है, जो विभिन्न संयोजनों की एक अनंत संख्या देता है।

कोई भी प्रोग्राम कोड इन "शून्य और लोगों" की प्रोग्रामर व्याख्या के लिए एक समझदार है जिसके साथ कंप्यूटर काम करता है। इस प्रकार, कोई भी प्रोग्रामिंग भाषा एक मानव-मशीन इंटरफ़ेस है।

ब्राउज़र अन्य कंप्यूटर अनुप्रयोगों की तरह ही काम करते हैं। वे HTML, एक्सएमएल, सीएसएस, जावास्क्रिप्ट, PHP, पर्ल, आदि की व्याख्या "शून्य और लोगों" में करते हैं। इस बहुभाषावाद के साथ काम करने के लिए, आपको एक सामान्य मंच की आवश्यकता है। यह प्लेटफार्म है डोम - एक विनिर्देश जो एक विशेष प्रोग्रामिंग भाषा या मार्कअप से स्वतंत्र है। यह एक इंटरफ़ेस है जिसका उपयोग वेब पेजों के निर्माण से संबंधित कई लोकप्रिय प्रोग्रामिंग भाषाओं में किया जा सकता है और वस्तुओं को समझने और उनकी व्याख्या करने में सक्षम है। डोम.

डोम और ब्राउज़र

डोम और जावास्क्रिप्ट

जावास्क्रिप्ट में, वस्तुओं की श्रेणीबद्ध सीढ़ी के शीर्ष डोम, इस इंटरफ़ेस के लिए "कंडक्टर" का एक प्रकार है दस्तावेज़और वस्तुओं डोम इसके गुण, इसके गुणों के गुण आदि बनें। उन्हें भी बुलाया जाता है डोम नोड्स.

डोम नोड्स

में डोम स्तर 2 में 12 प्रकार के नोड हैं। प्रत्येक प्रकार के नोड के पीछे डोम अद्वितीय नाम के साथ स्थिर। अधिकांश नोड्स के साथ काम करने के लिए डिज़ाइन किए गए हैं एक्सएमएल... विधानसभा में HTML - जावास्क्रिप्टकि हम साथ काम कर रहे हैं, केवल 5 प्रकारों का उपयोग किया जा सकता है। लेकिन यहां तक \u200b\u200bकि यह "हिमशैल की नोक" एक बहुत "फैलाने वाला पेड़" है जिसे एक या दो सत्रों में कवर नहीं किया जा सकता है।

विनिर्देश में परिभाषित नोड प्रकार स्थिरांक का पूरा सेट डब्ल्यू 3 सी डोम (नोड्स के लिए उपलब्ध HTML - जावास्क्रिप्ट):

लगातार नाम	मूल्य	विवरण
Node.ELEMENT_NODE		तत्व नोड (HTML दस्तावेज़ के लिए दस्तावेज़ का मूल तत्व देता है, यह HTML तत्व है)
Node.ATTRIBUTE_NODE		नोड की विशेषता (XML या HTML दस्तावेज़ में एक तत्व का एक गुण देता है)
		टेक्स्ट नोड (#text)
Node.CDATA_SECTION_NODE		CDATA अनुभाग नोड (XML: वर्ण डेटा प्रदर्शित करने के लिए वैकल्पिक सिंटैक्स)
Node.ENTITY_REFERENCE_NODE
Node.ENTITY_NODE		खंड नोड
Node.PROCESSING_INSTRUCTION_NODE		एक्सएमएल डायरेक्टिव नोड
Node.COMMENT_NODE		टिप्पणी नोड
Node.DOCUMENT_NODE		दस्तावेज़ नोड (दस्तावेज़ की सामग्री तक पहुंचने और इसके घटक बनाने का आधार)
Node.DOCUMENT_TYPE_NODE		दस्तावेज़ प्रकार नोड (दिए गए दस्तावेज़ का प्रकार, अर्थात् DOCTYPE टैग का मान लौटाता है)
Node.DOCUMENT_FRAGMENT_NODE		दस्तावेज़ टुकड़ा नोड (दस्तावेज़ के पेड़ के एक हिस्से को निकालना, एक नया दस्तावेज़ टुकड़ा बनाना, एक नोड के बाल तत्व के रूप में एक टुकड़ा सम्मिलित करना, आदि)
Node.NOTATION_NODE		अंकन नोड *

* अधिसूचनाएं ऐसे नाम हैं जो अप्रकाशित वर्गों के प्रारूप की पहचान करते हैं, उन तत्वों के प्रारूप जिनमें एक संकेतन विशेषता है, या एक निर्देश को संबोधित करने के लिए आवेदन है। (स्पष्ट नहीं है? मैं इसे बहुत अच्छा नहीं हूँ)

DOM में दस्तावेज़ संरचना

सभी दस्तावेज़ ऑब्जेक्ट DOM नोड्स हैं। प्राथमिक दस्तावेज़ पर विचार करें:

< title>डोम

"केंद्र"\u003e शीर्षक

पैरा पाठ

यहाँ इसके DOM पेड़ का आरेख है:

प्रत्येक नोड में बच्चे के नोड्स हो सकते हैं (तीर आरेख में उनके लिए नेतृत्व करते हैं)। दस्तावेज़ ऑब्जेक्ट - दस्तावेज़ ट्री का आधार - भी एक नोड है, लेकिन इसमें एक मूल नोड नहीं है और इसमें कई गुण और विधियां हैं जो अन्य नोड्स में नहीं हैं। इसमें एक बच्चा नोड: तत्व है .

तत्त्व दो बच्चे नोड्स: तथा जिसके लिए वे सभी तत्व होते हैं जो बच्चे बनते हैं।

ध्यान!

"तत्व" और "टैग" समानार्थक शब्द नहीं हैं। एक टैग एक मार्कअप संकेत है: वे दो अलग-अलग टैग हैं। एक तत्व इन टैग के साथ चिह्नित एक वस्तु है:

पैरा पाठ

.

अवयव