DOM प्रोग्रामिंग: कोड के साथ वेब पेजों में हेरफेर

प्रकटीकरण: आपका समर्थन साइट को चालू रखने में मदद करता है! हम इस पृष्ठ पर हमारे द्वारा सुझाई गई कुछ सेवाओं के लिए एक रेफरल शुल्क कमाते हैं.


दस्तावेज़ ऑब्जेक्ट मॉडल या DOM बताता है कि HTML पृष्ठ में प्रत्येक तत्व दस्तावेज़ से कैसे संबंधित है.

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

इसका मतलब है कि हर छवि, हर पैराग्राफ, हर हेडिंग, और इसी तरह एक अलग ऑब्जेक्ट है जिसका दस्तावेज़ के साथ अपना संबंध है.

किसी विशेष तत्व को उसके नाम से बुलाकर, वेब डेवलपर्स उस तत्व को संशोधित कर सकते हैं। इसका मतलब है कि वेब डेवलपर अपने गुणों को पुनः प्राप्त और सेट कर सकते हैं.

DOM तत्वों या ऑब्जेक्ट्स को जोड़ना और हटाना भी संभव बनाता है। अंत में, यह वेब डेवलपर्स को प्रभावी ढंग से घटनाओं से निपटने के लिए उपयोगकर्ता या ब्राउज़र कार्यों पर कब्जा करने और प्रतिक्रिया देने की अनुमति देता है.

DOM का संक्षिप्त इतिहास

DOM का इतिहास ब्राउज़र के युद्धों और पहली स्क्रिप्टिंग भाषाओं की रिलीज़ के दिनों की है.

एक बार नेटस्केप के नेविगेटर और माइक्रोसॉफ्ट के इंटरनेट एक्सप्लोरर दोनों ने जावास्क्रिप्ट के अपने स्वयं के संस्करण जारी किए, डेवलपर्स ने खुद को एक इंटरफ़ेस की आवश्यकता के लिए पाया, जो पृष्ठ पर तत्वों को उन स्क्रिप्टिंग भाषाओं के साथ एक्सेस करने की अनुमति देगा।.

स्वाभाविक रूप से, प्रत्येक ब्राउज़र की अपनी विधि थी लेकिन इससे कई संगतता समस्याएं उत्पन्न हुईं क्योंकि ब्राउज़र विक्रेताओं ने नई सुविधाओं को जोड़कर एक दूसरे से आगे निकलने की कोशिश की.

आखिरकार, W3C ने XML DOM के लिए एक विनिर्देशन पर काम करना शुरू कर दिया, जिसे स्तर 1 DOM भी कहा जाता है, जिसे सभी ब्राउज़रों में पोर्टेबल माना जाता था.

यह किसी भी प्रोग्रामिंग भाषा के लिए काम करने के लिए भी था जो XML दस्तावेजों में हेरफेर कर सकता था। इस विनिर्देश को 1998 के अंत में मानक के रूप में अपनाया गया था। वर्तमान संस्करण DOM 4 है, जो 2015 से डब्ल्यू 3 सी की सिफारिश है.

डोम के दो दृश्य

DOM में दो भाग होते हैं; कोर और HTML। कोर HTML भाग के लिए आधार है और इसका उपयोग XML दस्तावेज़ों के लिए आवश्यक संरचना का प्रतिनिधित्व करने के लिए किया जाता है ताकि दस्तावेज़ संरचना, उसके तत्वों और विशेषताओं में हेरफेर किया जा सके।.

HTML भाग विशिष्ट HTML तत्वों और उनकी कार्यक्षमता को परिभाषित करता है। जैसे, DOM को API और ऑब्जेक्ट दोनों के रूप में देखा जाता है.

एक एपीआई के रूप में डोम

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

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

DOM में ऑब्जेक्ट मॉडल इस तथ्य को संदर्भित करता है कि दस्तावेजों और तत्वों को वस्तुओं के रूप में परिभाषित किया गया है। इस अर्थ में यह पहचान करता है:

  • किसी दस्तावेज़ का प्रतिनिधित्व और हेरफेर करने के लिए उपयोग किए जाने वाले इंटरफेस और ऑब्जेक्ट
  • उनका व्यवहार और गुण
  • उनके रिश्ते.

डोम संरचना

संरचनात्मक रूप से, DOM उस मॉडल के दस्तावेज़ से बहुत मिलता जुलता है। दस्तावेज़ के प्रत्येक तत्व को एक वस्तु या नोड के रूप में माना जाता है, जो एक पदानुक्रमित फैशन में आयोजित किया जाता है.

प्रत्येक नोड में एक फ़ंक्शन और एक पहचान होती है और प्रत्येक नोड में किसी भी बच्चे के नोड्स हो सकते हैं। सबसे आम नोड्स तत्व, पाठ और गुण हैं.

तत्व नोड्स

तत्व नोड्स HTML कोड में व्यक्तिगत टैग या टैग जोड़े हैं। उनके पास बच्चे के नोड्स हो सकते हैं, जो अन्य तत्व या टेक्स्ट नोड हो सकते हैं.

पाठ नोड्स

HTML टैग के बीच टेक्स्ट नोड्स वास्तविक सामग्री है। उनके पास आमतौर पर एक माता-पिता का नोड होता है और कभी-कभी नोड्स सिबलिंग होते हैं, लेकिन उनके पास अपने बच्चे के नोड नहीं हो सकते हैं.

नोड्स को अट्रैक्ट करें

विशेषता नोड्स कुछ विशेष हैं। उनके पास माता-पिता का नोड, बच्चे, या भाई-बहन नोड्स नहीं हैं, बल्कि वे HTML टैग में परिभाषित विशेषताओं का प्रतिनिधित्व करते हैं, जैसे कि टैग में href विशेषता या img टैग में src विशेषताएँ.

Document.createAttribute () का उपयोग करके एक नई विशेषता बनाई जा सकती है और फिर आप इसे एक तत्व नोड को निर्दिष्ट कर सकते हैं और इसका मान सेट कर सकते हैं। रेफरेंसिंग विशेषताओं का एक और तरीका है एक तत्व की विशेषताओं को सीधे गेटअट्रिब्यूट () का उपयोग करके और सेटआट्रिब्यूट () विधि का उपयोग करके इसका मान सेट करना।.

विशेषताओं के बारे में बात करते समय, यह उल्लेखनीय है कि HTML टैग्स के साथ उपयोग की जाने वाली अधिकांश विशेषताएँ अपेक्षाकृत सरल होती हैं, जिसमें उस टैग से जुड़ी विशिष्ट संपत्ति के लिए एकल मान शामिल होता है। हालांकि, स्टाइल की विशेषताएं भी हैं जो अधिक जटिल हो सकती हैं.

स्टाइल विशेषताएँ सीएसएस की मदद से लागू की जाती हैं। आप इसका उपयोग व्यक्तिगत टैग, किसी विशेष प्रकार के सभी टैग पर शैली लागू करने के लिए कर सकते हैं, या आप कक्षाओं का उपयोग करके शैली विशेषताओं को असाइन कर सकते हैं.

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

हालाँकि, ऐसा करने से तत्व के सभी शैली पैरामीटर बदल जाएंगे और कुछ मामलों में, यह व्यावहारिक नहीं है, खासकर यदि आप केवल एक शैली पैरामीटर बदलना चाहते हैं.

सौभाग्य से, शैली की विशेषताएं अन्य विशेषताओं से भिन्न होती हैं। उन्हें वस्तुओं के रूप में परिभाषित किया गया है और हर संभव पैरामीटर के लिए गुण हैं। इन गुणों को तब एक्सेस किया जा सकता है, अपडेट किया जा सकता है, और अन्यथा हेरफेर किया जा सकता है.

डोम का उपयोग करना

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

  • getElementById ()
  • getElementsByTagName ()
  • createElement ()
  • createAttribute ()
  • createTextNode ().

आप निम्न विधियों का उपयोग करके नोड्स को गतिशील रूप से जोड़ सकते हैं, अपडेट कर सकते हैं और हटा सकते हैं:

  • insertBefore ()
  • replaceChild ()
  • removeChild ()
  • अपेंड चाइल्ड()
  • cloneNode ().

DOM सीधे HTML, CSS और JavaScript से जुड़ा हुआ है क्योंकि यह उन मानकों द्वारा परिभाषित टैग और विशेषताओं के साथ-साथ क्लाइंट-साइड स्क्रिप्टिंग के लिए API के रूप में कार्य करता है।.

साधन

संसाधनों की निम्न सूची डोम का विस्तृत विवरण देती है और शुरुआती और उन्नत उपयोगकर्ताओं दोनों के लिए उपयुक्त है। उदाहरण के साथ संसाधनों के साथ-साथ एक संदर्भ सूची भी शामिल है.

  • जावास्क्रिप्ट और डीओएम श्रृंखला: यह ट्यूटोरियल का एक बहुत विस्तृत श्रृंखला है जो कि डोम को हेरफेर करने के लिए जावास्क्रिप्ट का उपयोग करने के बारे में बहुत विस्तार से है.
  • जावास्क्रिप्ट डोम ट्यूटोरियल: इंटरैक्टिव ट्यूटोरियल का एक सेट है जो आपको सिखाता है कि जावास्क्रिप्ट से डोम तक कैसे पहुंचें और हेरफेर करें। जावास्क्रिप्ट का एक पूर्व ज्ञान माना जाता है, हालांकि, यह ध्यान देने योग्य है कि कोई विशिष्ट पुस्तकालयों का उपयोग नहीं किया जाता है.
  • DOM नोड्स: DOM के संरचित के लिए परिचित होने के लिए उपयुक्त DOM नोड्स का एक बहुत गहन अवलोकन, जो कि किस प्रकार DOM संरचित है और किस नोड्स में शामिल है.
  • जावास्क्रिप्ट डोम – एक्सरसाइज, प्रैक्टिस, सॉल्यूशन: विभिन्न एक्सरसाइज का एक सेट जिसमें साधारण एक्सरसाइज से लेकर और अधिक जटिल तक शामिल हैं.
  • W3C डॉक्यूमेंट ऑब्जेक्ट मॉडल (DOM): W3C द्वारा प्रकाशित यह मार्गदर्शिका DOM, इतिहास और यह कैसे काम करता है, का परिचयात्मक और शुरुआती-अनुकूल अवलोकन प्रदान करता है।.
  • DOM का परिचय: Mozilla Developer Network द्वारा प्रकाशित DOM के लिए एक संक्षिप्त वैचारिक परिचय जो बताता है कि यह HTML और XML दस्तावेज़ों के लिए संरचना कैसे प्रदान करता है और आप इसे कैसे एक्सेस कर सकते हैं.
  • W3C DOM4: 2015 से W3C डेटिंग की नवीनतम DOM सिफारिश, जिसमें DOM के लिए सिंहावलोकन और विस्तृत विवरण शामिल हैं.
  • DOM संदर्भ: Microsoft के डेवलपर नेटवर्क द्वारा प्रकाशित एक आसान संदर्भ सूची जिसमें गुण, विधियाँ, घटनाएँ, और बहुत कुछ शामिल हैं.

पुस्तकें

यदि आप पुस्तकों से सीखना पसंद करते हैं, तो कई विकल्प हैं। सूची की पुस्तकें DOM के बारे में बहुत विस्तार से बताती हैं कि यह कैसे काम करता है, और कैसे दस्तावेजों में हेरफेर किया जा सकता है.

  • DOM स्क्रिप्टिंग: जावास्क्रिप्ट के साथ वेब डिज़ाइन और दस्तावेज़ ऑब्जेक्ट मॉडल (2005), जेरेमी कीथ द्वारा: यह पुस्तक उन लोगों के लिए एक त्वरित और आसान संदर्भ प्रदान करती है, जो कोड विशेषज्ञ नहीं हैं, लेकिन जावास्क्रिप्ट और DOM को जोड़ने के लिए जल्दी से सीखना और लाभ लेना चाहते हैं उनकी वेब साइटों के लिए कार्यक्षमता। इसमें कई वास्तविक विश्व परियोजनाओं के निर्माण के माध्यम से बहुत सारे उदाहरण और मार्गदर्शक पाठक शामिल हैं.
  • डॉक्यूमेंट ऑब्जेक्ट मॉडल (2002), जो मारिनी द्वारा: इस पुस्तक के लेखक आपको DOM की अवधारणाओं, डिजाइन, सिद्धांत और उत्पत्ति को जानने में मदद करते हैं। पुस्तक के दौरान, आप दस्तावेज़ के नोड्स और सामग्री का निरीक्षण करने, नेविगेट करने और हेरफेर करने के लिए DOM का उपयोग करेंगे; फिर उन उपयोगी अनुप्रयोगों का निर्माण करना सीखें जिन्हें आसानी से किसी भी डोम-कंप्लीट कार्यान्वयन के बिना री-कोडिंग के लिए पोर्ट किया जा सकता है.
  • डोम ज्ञानोदय: कोडी लिंडले द्वारा जावास्क्रिप्ट और आधुनिक डोम (2013) की खोज करना: इस पुस्तक की मदद से, आप सीखेंगे कि डॉम लाइब्रेरी का उपयोग किए बिना डॉक्यूमेंट ऑब्जेक्ट मॉडल (DOM) को लिपिबद्ध करके HTML को और अधिक कुशलता से कैसे व्यवस्थित किया जाए। उदाहरणों को पचाने में बहुत आसान होने के साथ, लेखक आपको विभिन्न डोम वस्तुओं के काम करने के तरीके को प्रदर्शित करने के लिए आधुनिक DOM कॉन्सेप्ट्स का पूरा साथ देता है.

जाओ फोर्थ और डोम को पीछे करो

DOM को समझना किसी भी महत्वाकांक्षी वेब डेवलपर के लिए आवश्यक अवधारणाओं में से एक है.

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

ऊपर दिए गए संसाधन आपको DOM को ट्रेस करने में एक ठोस शुरुआती बिंदु के रूप में काम करेंगे.

आगे पढ़ना और संसाधन

हमारे पास कोडिंग और वेबसाइट विकास से संबंधित अधिक गाइड, ट्यूटोरियल और इन्फोग्राफिक्स हैं:

  • अच्छा HTML रचना: यह अच्छी तरह से गठित HTML लिखने और HTML सत्यापनकर्ता सॉफ्टवेयर का उपयोग करने के लिए एक ठोस परिचय है.
  • CSS3 – इंट्रो, गाइड्स, और संसाधन: यह वेबपेज लेआउट सीखने के लिए एक शानदार जगह है.
  • ASP.NET संसाधन: यह गाइड आपको वेबपेज बनाने के लिए Microsoft के .NET फ्रेमवर्क के साथ मिलेगा.

शुरुआती के लिए HTML – अंतिम गाइड

यदि आप वास्तव में HTML सीखना चाहते हैं, तो हमने एक पुस्तक-लंबाई वाला लेख, HTML फॉर बिगिनर्स – अल्टीमेट गाइड बनाया है.

और यह वास्तव में परम मार्गदर्शक है; यह आपको शुरुआत से ही महारत तक ले जाएगा.

शुरुआती के लिए HTML - अंतिम गाइड
शुरुआती के लिए HTML – अंतिम गाइड

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map