डॉक्यूमेंट ऑब्जेक्ट मॉडल (डीओएम), जो मूल रूप से "वेब पेज पर्दे के पीछे कैसे काम करते हैं" के लिए वेब देव भाषा है, यह कुछ ऐसा है जो हर वेब डेवलपर के पास होना चाहिए उनका टूलकिट. यह उस गुप्त चटनी की तरह है जो आधुनिक वेब विकास को शक्ति प्रदान करती है।

लेकिन DOM क्यों? मैंने हाल ही में एक वीडियो देखा कि ब्राउज़र कैसे काम करते हैं और फिर कुछ लेखों पर ध्यान दिया और यह "क्यों?"

प्रत्येक ब्राउज़र एक ** ब्राउज़र इंजन** के साथ काम करता है, यह वेब ब्राउज़र का एक मुख्य घटक है जो HTML, CSS और जावास्क्रिप्ट सहित वेब सामग्री को एक दृश्य प्रतिनिधित्व में प्रस्तुत करने के लिए जिम्मेदार है, जिसके साथ उपयोगकर्ता बातचीत कर सकते हैं।

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

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

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

इन वर्णों को आगे टोकन नामक चीज़ में पार्स किया जाता है। किसी भी अन्य प्रोग्रामिंग भाषा की तरह टोकन को उस प्रोग्रामिंग भाषा के सबसे छोटे व्यक्तिगत तत्व के रूप में परिभाषित किया जा सकता है जो सार्थक है। यहां टोकन HTML में टैग को संदर्भित करता है अर्थात् बॉडी, एच1, एच2, पी, स्पैन आदि।

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

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

संक्षेप में, नाम “डॉक्यूमेंट ऑब्जेक्ट मॉडल” इसके उद्देश्य और कार्य को दर्शाता है। यह वेब पेज सामग्री के लिए एक संरचित मॉडल के रूप में कार्य करता है, जिसे वस्तुओं के संग्रह के रूप में दर्शाया जाता है। "DOM" नाम "दस्तावेज़" (वेब ​​पेज), "ऑब्जेक्ट" (तत्वों का प्रतिनिधित्व), और "मॉडल" (संरचित प्रतिनिधित्व) के संलयन से उभरा।

मुझे आशा है कि इससे मदद मिलेगी, और यदि आपके पास कोई विशिष्ट प्रश्न या चिंता है तो कृपया बेझिझक कोई प्रतिक्रिया दें या पूछें।