"डोम" एक ऐसा शब्द है जिसका उपयोग सामने वाले के वेब डिज़ाइन और विकास में बहुत किया जाता है। यह "दस्तावेज़ ऑब्जेक्ट मॉडल" के लिए खड़ा है, और यह वेबसाइटों का एक मूलभूत हिस्सा है।
DOM जितना महत्वपूर्ण है, कई लोग इसे समझ नहीं पाते हैं। वास्तव में, आप इसके बारे में बहुत कुछ सीखे बिना वर्षों तक वेबसाइटें प्रोग्राम कर सकते हैं। लेकिन फ्रंट-एंड टेक्नोलॉजी एडवांस के रूप में, DOM को समझना अधिक महत्वपूर्ण होता जा रहा है।
DOM कॉन्ट्रैक्ट को समझना
ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग में, एक निर्माण होता है जिसे एक इंटरफ़ेस कहा जाता है। एक इंटरफ़ेस अपने आप कुछ नहीं करता है। इसके बजाय, यह एक अनुबंध बनाता है। यह कहता है कि कोई भी चीज़ किसी और चीज़ के साथ बातचीत कर सकती है, जब तक कि यह इंटरफ़ेस अनुबंध के नियमों का पालन करती है।
एक इंटरफ़ेस होने से प्रोग्राम के किसी भी हिस्से को प्रोग्राम के किसी अन्य हिस्से के साथ नियंत्रित और अनुमानित तरीके से बातचीत करने की सुविधा मिलती है। इंटरफ़ेस किसी भी अन्य भाग के साथ काम करने के लिए एक कार्यक्रम के एक हिस्से के लिए भी संभव बनाता है, भले ही वह इंटरफ़ेस के दूसरी तरफ कार्यक्रम के हिस्से के बारे में कुछ भी नहीं जानता हो।
एक इंटरफ़ेस आपकी दीवार में एक विद्युत आउटलेट की तरह है। आपके डिवाइस को यह जानने की आवश्यकता नहीं है कि वोल्टेज सही है, जहां से बिजली आ रही है। कोने पर स्थित ट्रांसफार्मर को यह जानने की आवश्यकता नहीं है कि यह क्या है। इसे बस आपके घर में उचित वोल्टेज पर बिजली भेजने की आवश्यकता है।
DOM वेब पेज और कोड के बीच एक इंटरफ़ेस लेयर है जो इसे बनाता और बदलता है। जब आप किसी वेबसाइट पर जाते हैं, तो आप देख रहे हैं कि ब्राउज़र उस वेबसाइट के DOM को कैसे प्रस्तुत करता है। जब आप HTML लिखते हैं, तो आप वास्तव में DOM के API (प्रोग्रामिंग इंटरफ़ेस) का उपयोग करके प्रोग्रामिंग कर रहे हैं।
DOM मानक को संगठन नामक संस्था द्वारा बनाए रखा जाता है वर्ल्ड वाइड वेब कंसोर्टियम, या W3C। उन्होंने बनाया है DOM को परिभाषित करने वाला अत्यधिक विस्तृत प्रलेखन मानक।
इस बिंदु पर, आप सोच रहे होंगे कि वे बहुत अच्छा काम नहीं कर रहे हैं। आखिरकार, क्रॉस-ब्राउज़र संगतता समस्याओं के कारण बहुत सारी समस्याएं हैं।
समस्या मानक के साथ नहीं है। यह खुद ब्राउज़र के साथ है। कई ब्राउज़रों ने अपने DOM कार्यान्वयन में कार्यक्षमता जोड़ी है जो W3C मानकों का अनुपालन नहीं करते हैं। कभी-कभी यह कार्यक्षमता लोकप्रिय हो जाती है और डोम मानक में लागू हो जाती है, अन्य ब्राउज़रों को पकड़ने के लिए मजबूर किया जाता है।
एक और समस्या यह है कि कुछ लोग अभी भी ब्राउज़रों के पुराने संस्करणों का उपयोग कर रहे हैं जिनके पास नवीनतम DOM मानक अंतर्निहित नहीं है। और कभी-कभी ब्राउज़र मानक को सही ढंग से लागू नहीं करते हैं।
डोम कैसे संरचित है
आप एक पेड़ की तरह डोम के बारे में सोच सकते हैं। तत्व ट्रंक है, और इसके अंदर सभी तत्व शाखाएं हैं। जब आप HTML तत्वों को मूल तत्व के अंदर घोंसला बनाते हैं, तो आप वास्तव में उस शाखा से शाखाएं बना रहे हैं। प्रत्येक शाखा के लिए उचित शब्द "नोड" है।
पेड़ की संरचना एक परिवार के पेड़ की तरह, नोड्स के बीच तार्किक संबंध बनाती है। प्रत्येक नोड में एक माता-पिता और पूर्वज हो सकते हैं, जहां से यह शाखाएं होती हैं। उनके भाई-बहन हो सकते हैं। और नोड्स में बच्चे और वंशज हो सकते हैं। डोम के साथ बातचीत करने के लिए जावास्क्रिप्ट और सीएसएस का उपयोग करते समय इन शब्दों में सोचने से बहुत मदद मिलती है।
HTML, DOM के साथ कैसे इंटरैक्ट करता है
दस्तावेज़ इंटरफ़ेस के साथ दस्तावेज़ ऑब्जेक्ट बनाकर DOM को परिभाषित किया गया है। दस्तावेज़ बनाने के लिए आपका HTML कोड सबसे सीधा तरीका है। HTML आपको पारंपरिक प्रोग्रामिंग करने की आवश्यकता के बिना दस्तावेज़ को परिभाषित करने का एक सरल तरीका देता है।
यदि आप अभी HTML से शुरुआत कर रहे हैं, तो यहां हैं इसके साथ खुद को परिचित करने के लिए पांच सुझाव.
HTML हर वेबपेज की रीढ़ है। यदि आप एक शुरुआत कर रहे हैं, तो हमें HTML समझने के लिए बुनियादी चरणों के माध्यम से चलते हैं।
HTML पारंपरिक प्रोग्रामिंग भाषाओं की तुलना में सरल और अधिक क्षमाशील है। यह शुरुआती वेब डिजाइनरों के लिए आसान डोम के साथ बातचीत करता है।
सीएसएस डोम के साथ कैसे इंटरैक्ट करता है
एक बार जब आपके HTML ने DOM दस्तावेज़ को संरचित कर दिया है, तो CSS उस दस्तावेज़ को स्टाइल कर सकता है। ऐसा करने के लिए, आपको उन तत्वों को खोजने में सक्षम होना चाहिए जिन्हें आप शैली करना चाहते हैं। यह कुछ तरीकों से ऐसा करता है।
आप नाम से तत्वों को संदर्भित करके दस्तावेज़ नोड्स तक पहुंच सकते हैं, जैसे तथा. CSS सीधे संदर्भित करके तत्वों तक भी पहुँच सकता है कक्षा तथा ईद names. क्लास स्टाइलिंग कई तत्वों पर लागू होती है ताकि आप उन्हें एक ही समय में स्टाइल कर सकें। इसके विपरीत, आईडी स्टाइल केवल एक तत्व में परिवर्तन लागू करता है।
आप सीएसएस के साथ परिवार के पेड़ की संरचना तक भी पहुंच सकते हैं और अधिक नियंत्रण के लिए फाइन-ट्यून एक्सेस कर सकते हैं। CSS चयनकर्ता आपको कई तत्व चुनने देते हैं और आपको उन्हें खोजने के लिए ट्रिक्स का एक बैग प्रदान करते हैं। आप बच्चों को उनके वंश, कक्षाओं के संयोजन, और बहुत कुछ द्वारा खोज सकते हैं।
कैसे DOM DOM के साथ इंटरैक्ट करता है
दस्तावेज़ पर जावास्क्रिप्ट का सबसे अधिक नियंत्रण है क्योंकि जावास्क्रिप्ट एक वास्तविक प्रोग्रामिंग भाषा है जिसमें ऑब्जेक्ट्स, फ्लो कंट्रोल, वैरिएबल्स आदि हैं। DOM कई इंटरफेस प्रदान करता है जो जावास्क्रिप्ट को दस्तावेज़, तत्वों और अन्य नोड्स में हेरफेर करने की क्षमता देता है।
सम्बंधित: जावास्क्रिप्ट क्या है?
जावास्क्रिप्ट नोड्स को जोड़ने और हटाने के साथ-साथ उनकी शैली भी बदल सकता है। और जावास्क्रिप्ट दस्तावेज़ में घटनाओं के लिए देख सकता है, जैसे कि किसी तत्व पर माउस को मँडरा कर, क्लिक करके, और कुंजी दबाकर।
जावास्क्रिप्ट सीएसएस में बहुत ही समान तरीके से दस्तावेज़ के पेड़ को खोज और नेविगेट कर सकता है। यह आईडी और कक्षा द्वारा तत्वों को खोजने में सक्षम है। और यह बाल तत्वों की सूची को सरणियों के रूप में पुनः प्राप्त कर सकता है।
वेब विकास और डोम का भविष्य
शुरुआती दिनों से इंटरनेट बहुत बदल गया है। शुरुआती दिनों में, जावास्क्रिप्ट का उपयोग ज्यादातर विशेष प्रभावों और सरल डेटा डिस्प्ले के लिए किया गया था। अधिकांश वेबसाइटें डिजिटल ब्रोशर से बहुत अधिक नहीं थीं। AJAX ने वह सब बदल दिया, हालांकि।
AJAX वेबसाइटों को पृष्ठ को फिर से लोड किए बिना एक सर्वर से प्रदर्शित डेटा को मक्खी पर अपडेट करने की अनुमति देता है। AJAX से पहले, डेटा में हर परिवर्तन केवल तब देखा जा सकता था जब पृष्ठ को पुनः लोड किया जाता था, या उपयोगकर्ता किसी अन्य पृष्ठ पर नेविगेट करता था।
AJAX के बाद, वेब ऐप्स अधिक से अधिक लोकप्रिय हो गए। इंटरनेट अब ईबे की तरह सरल स्थिर वेबसाइटों और कुछ उच्च कार्यक्षमता वाले ऐप्स का संग्रह नहीं है। अब इंटरनेट लगभग एक दूसरा ऑपरेटिंग सिस्टम है, जो अत्यधिक कार्यात्मक एप्लिकेशन से भरा है।
जैसे-जैसे यूजर्स की उम्मीदें बढ़ती हैं, टेक्नोलॉजी को बरकरार रखना चाहिए। जावास्क्रिप्ट सबसे शक्तिशाली या सबसे तेज़ भाषा नहीं है। यह फ्लोटिंग-पॉइंट नंबर त्रुटियों जैसे कई मुद्दों से ग्रस्त है जो इसे डेवलपर्स के लिए कम वांछनीय बनाते हैं। यह वह जगह है जहाँ WebAssembly में आता है।
WebAssembly ब्राउज़र में देशी कोड के कई लाभ लाता है, जिसमें बेहतर गति और बेहतर हार्डवेयर एक्सेस शामिल है। यह प्रोग्रामर्स को C ++ और Rust जैसी वेबसाइट बनाने के लिए अन्य भाषाओं का उपयोग करने देगा।
लेकिन यहां तक कि WebAssembly लाए जाने वाले विशाल सुधारों के बावजूद, DOM अभी भी वहां रहेगा, जो कोड के बीच एक सुसंगत इंटरफ़ेस प्रदान करता है और ब्राउज़र में प्रदर्शित होता है।
आंखों के तनाव को कम करें और माइक्रोसॉफ्ट आउटलुक को डार्क मोड में लाकर अपनी बैटरी लाइफ बढ़ाएं।
- प्रोग्रामिंग
- एचटीएमएल
- सीएसएस
- दस्तावेज़ ऑब्जेक्ट मॉडल
ली एक पूर्णकालिक खानाबदोश और कई जुनून और हितों के साथ एक बहुपद है। उनमें से कुछ जुनून उत्पादकता, व्यक्तिगत विकास और लेखन के इर्द-गिर्द घूमते हैं।
हमारे न्यूज़लेटर की सदस्यता लें
टेक टिप्स, समीक्षा, मुफ्त ईबुक और विशेष सौदों के लिए हमारे न्यूज़लेटर में शामिल हों!
एक और कदम…!
कृपया हमें आपके द्वारा भेजे गए ईमेल में अपने ईमेल पते की पुष्टि करें।
