विवरण में डॉक्यूमेंट ऑब्जेक्ट ऑब्जेक्ट मॉडल (DOM) को समझना

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

DOM के सीखने और समझने के बेहतर तरीके हैं एक्सेस करना, बदलना और निगरानी करना HTML पेज के विभिन्न तत्व। दस्तावेज़ ऑब्जेक्ट मॉडल भी हमारी मदद कर सकता है स्क्रिप्ट निष्पादन समय में अनावश्यक वृद्धि को कम करना.

डेटा संरचना पेड़

डोम क्या है, यह कैसे अस्तित्व में आता है, यह कैसे मौजूद है और इसके अंदर क्या होता है, इसके बारे में बात करने से पहले, मैं चाहता हूं कि आप पेड़ों के बारे में जानें। शंकुधारी और पर्णपाती प्रकार के बारे में नहीं बल्कि डेटा संरचना पेड़.

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

बेशक, यह सब डेटा संरचना के लिए नहीं है, लेकिन यह बहुत ज्यादा है जहां यह सब शुरू होता है। इस “व्यवस्था” यह सब के दिल में है। यह डोम में भी बहुत महत्वपूर्ण है। लेकिन हम अभी डोम के बारे में बात नहीं कर रहे हैं, इसलिए मैं आपको इसकी ओर आकर्षित करता हूं डेटा संरचना जिससे आप परिचित हो सकते हैं: सरणियाँ.

Arrays और पेड़

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

इसी तरह, जब पेड़ों के बारे में सोचते हैं, तो हम कहते हैं, इसके बारे में है चीजों को एक दूसरे के नीचे रखना, शीर्ष पर केवल एक चीज से शुरू करना.

अब, आप पहले से सिंगल लाइन डक ले सकते हैं, इसे सीधा करें, और मुझे बताओ कि “अब, प्रत्येक बत्तख एक और बत्तख के नीचे है”. क्या यह एक पेड़ है? यह है.

इस बात पर निर्भर करता है कि आपका डेटा क्या है या आप इसका उपयोग कैसे कर रहे हैं, आपके पेड़ का सबसे ऊपरी डेटा (जिसे कहा जाता है) जड़) कुछ ऐसा हो सकता है काफी महत्व की या ऐसा कुछ है जो केवल वहाँ है इसके नीचे अन्य तत्वों को संलग्न करें.

किसी भी तरह से, पेड़ डेटा संरचना में सबसे ऊपरी तत्व कुछ बहुत महत्वपूर्ण है। यह एक जगह प्रदान करता है किसी भी जानकारी की खोज करना शुरू करें जिसे हम पेड़ से निकालना चाहते हैं.

DOM का अर्थ

डोम खड़ा है दस्तावेज़ ऑब्जेक्ट मॉडल. दस्तावेज़ एक HTML (XML) दस्तावेज़ को इंगित करता है जो है एक वस्तु के रूप में प्रतिनिधित्व किया. (जावास्क्रिप्ट में सब कुछ कभी भी केवल एक वस्तु के रूप में दर्शाया जा सकता है!)

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

डोम का पेड़

जावास्क्रिप्ट कोड में, HTML दस्तावेज़ है एक वस्तु के रूप में प्रतिनिधित्व किया. उस दस्तावेज़ से पढ़े गए सभी डेटा हैं वस्तुओं के रूप में भी सहेजा गया, एक दूसरे के तहत नेस्टेड (क्योंकि जैसा मैंने पहले कहा था, जावास्क्रिप्ट में हर चीज को केवल वस्तुओं के रूप में दर्शाया जा सकता है).

तो, यह मूल रूप से कोड में DOM डेटा की भौतिक व्यवस्था है: सब कुछ है वस्तुओं के रूप में व्यवस्थित. हालांकि, तार्किक रूप से, यह एक पेड़ है.

डोम पार्सर

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

ब्राउज़र एक HTML पृष्ठ पढ़ते हैं और उसका डेटा उन वस्तुओं में बदलते हैं जो DOM बनाते हैं। इन JavaScript DOM ऑब्जेक्ट में मौजूद जानकारी तार्किक रूप से DOM ट्री के रूप में जाने वाले डेटा स्ट्रक्चर ट्री के रूप में व्यवस्थित होती है.

HTML से DOM ट्री में डेटा पार्स करना

एक साधारण HTML फ़ाइल लें। यह है जड़ तत्व . आईटी इस उप तत्वों कर रहे हैं तथा , प्रत्येक के अपने स्वयं के कई बाल तत्व हैं.

तो अनिवार्य रूप से, ब्राउज़र HTML दस्तावेज़ में डेटा पढ़ता है, इसके समान कुछ:

तथा, उन्हें डोम ट्री में व्यवस्थित करता है इस तरह:

DOM ट्री में प्रत्येक HTML एलिमेंट (और उसके संबंधित कंटेंट) का प्रतिनिधित्व ए के रूप में जाना जाता है नोड. रूट नोड का नोड है .

डोम इंटरफ़ेस जावास्क्रिप्ट में कहा जाता है दस्तावेज़ (चूंकि यह HTML दस्तावेज़ का प्रतिनिधित्व है)। इस प्रकार, हम एक HTML दस्तावेज़ के DOM ट्री को एक्सेस करते हैं के माध्यम से दस्तावेज़ इंटरफेस जावास्क्रिप्ट में.

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

नोड्स कैसे डिज़ाइन किए जाते हैं

मैंने पहले उल्लेख किया है कि HTML दस्तावेज़ से डेटा का प्रत्येक टुकड़ा है जावास्क्रिप्ट में एक वस्तु के रूप में सहेजा गया. तो, ऑब्जेक्ट के रूप में सहेजे गए डेटा को तार्किक रूप से एक पेड़ के रूप में कैसे व्यवस्थित किया जा सकता है?

DOM ट्री के नोड्स में कुछ विशेषताएं या गुण होते हैं। एक पेड़ में लगभग हर नोड माता-पिता का नोड है (इसके ठीक ऊपर नोड), बच्चा नोड्स (इसके नीचे के नोड्स) और एक माँ की संताने (एक ही माता-पिता से संबंधित अन्य नोड्स)। यह होने परिवार ऊपर, नीचे, और एक नोड के आसपास यह एक के रूप में अर्हता प्राप्त करता है एक पेड़ का हिस्सा.

हर नोड की यह पारिवारिक जानकारी है उस नोड का प्रतिनिधित्व करने वाले ऑब्जेक्ट में गुणों के रूप में सहेजा गया. उदाहरण के लिए, बच्चे एक नोड की एक संपत्ति है जो उस नोड के बच्चे के तत्वों की एक सूची बनाता है, इस प्रकार तार्किक रूप से नोड के तहत अपने बच्चे के तत्वों की व्यवस्था करता है.

ओवरडोज़िंग डोम हेरफेर से बचें

जितना हम DOM को अपडेट करते हुए पा सकते हैं (एक वेब पेज को संशोधित करने के लिए), ऐसा कुछ नहीं है अति कर देना.

कहते हैं, आप के रंग को अद्यतन करना चाहते हैं