[Powered by Google Translate] [डोम]
[टॉमी MacWilliams] [हार्वर्ड विश्वविद्यालय]
[यह CS50 है.] [CS50.TV]
इस वीडियो में हम डोम पर एक नज़र ले जा रहे हैं.
एक ब्राउज़र एक वेबपेज डाउनलोड करता है, यह किसी भी तरह स्मृति में प्रतिनिधित्व करने की आवश्यकता है.
दस्तावेज़ ऑब्जेक्ट मॉडल, या डोम,
ब्राउज़र स्मृति में एक वेबपेज का प्रतिनिधित्व कैसे करें.
इस वीडियो में, हम, जावास्क्रिप्ट के संदर्भ में डोम पर एक नज़र रखेंगे
लेकिन डोम एक भाषा स्वतंत्र अवधारणा है.
उदाहरण के लिए, PHP के रूप में अच्छी तरह से अपने स्वयं के डोम कार्यान्वयन है.
हालांकि, डोम अक्सर जावास्क्रिप्ट द्वारा उपयोग किया जाता है
जावास्क्रिप्ट हमें मक्खी पर एक वेबपेज की सामग्री को बदलने के लिए अनुमति देता है के बाद से,
और डोम हमें एक वेबपेज के कुछ हिस्सों का उपयोग करने की अनुमति देता है.
चलो एक उदाहरण के वेबपेज पर एक नज़र रखना.
ठीक है, अब इस पृष्ठ डोम में प्रतिनिधित्व किया जाएगा कैसे देखते हैं.
और हर पेड़ के शीर्ष पर एक रूट नोड की जरूरत है.
इस दस्तावेज़ के लिए, HTML तत्व रूट नोड है
क्योंकि यह प्रतीत होता है कि पहला तत्व है.
चलो हमारे पेड़ के लिए एक रूट नोड जोड़ दें.
चलो फिर से HTML दस्तावेज़ पर एक नज़र रखना.
शरीर टैग HTML टैग के अंदर नेस्ट किया हुआ है कि ध्यान दें.
यह शरीर तत्व HTML तत्व का एक बच्चा है कि इसका मतलब है.
हम शरीर के एक पत्ता बनाकर हमारे डोम वृक्ष में यह प्रतिनिधित्व कर सकते हैं
एचटीएमएल से उतरते.
चलो करते हैं.
हम HTML नीचे शरीर है.
अब हम, कि शरीर अपने आप ही के 2 बच्चे हैं देख सकते हैं
H1 तत्व और उल तत्व.
यह है कि हम उन तत्वों के दोनों कनेक्ट कर सकते हैं इसका मतलब है कि
शरीर तत्व के लिए, तो चलो करते हैं.
हम एक H1 और एक उल है.
अंत में, उल तत्व, 3 और बच्चों की है
और यह हमारे डोम वृक्ष पूरा हो जाएगा, तो ली, ली, ली जोड़ने चलो.
यह हमारे डोम वृक्ष पूरा करता है, और इस ब्राउज़र अपने वेबपेज भंडारण है कि कैसे है.
अब हम जावास्क्रिप्ट का उपयोग कर इस वृक्ष पार कर सकते हैं पर एक नज़र रखना.
हम दस्तावेज नामक एक विशेष जावास्क्रिप्ट चर का उपयोग कर इस वृक्ष का उपयोग कर सकते हैं.
इस दस्तावेज़ वस्तु का एक संपत्ति
शरीर की संपत्ति है, और इस वस्तु का प्रतिनिधित्व करता है
हमारे उदाहरण वेबपेज में शरीर तत्व.
हम शरीर तत्व के बच्चों के सभी प्राप्त करना चाहता था
जो अगर तुम्हें याद है, कि H1 टैग और उल टैग है
हम document.body.childNodes कह सकते हैं.
और यह हमें H1 तत्व दोनों युक्त एक सरणी वापस दे देंगे
और वे शरीर के दोनों प्रत्यक्ष बच्चों रहे हैं के बाद उल तत्व.
हम उल तत्व का प्रतिनिधित्व करने वाले एक चर बनाने के लिए चाहते थे
हम यहाँ VRR उल = तो इस कोड को कह सकते हैं
और अब childNodes बस एक सरणी है क्योंकि
हम [1] के साथ में यह सूचकांक कि सरणी का दूसरा तत्व प्राप्त करने के लिए. कर सकते हैं
इस नए उल वस्तु के साथ हम अपने आईडी की तरह तत्व के विभिन्न गुणों का उपयोग कर सकते हैं.
हम स्ट्रिंग सूची के बराबर होने जा रहा है कि ul.id कहते हैं
कि हम अपने HTML पृष्ठ में क्या किया है क्योंकि.
हम भी इस मामले में होने जा रहा है, जो अपने tagName प्राप्त कर सकते हैं
तत्व की किस प्रकार यह इस मामले में, एक उल में है.
हम भी अपने माता - पिता या यह ऊपर नोड, प्राप्त कर सकते हैं, जो इस मामले में
शरीर तत्व होने जा रहा है.
हम document.body रूप में ही किया जा रहा है. ParentNode, कहते हैं.
बेशक, इस उल, अपने स्वयं के बच्चों की है
इसलिए हम अभी भी कह सकते हैं. childNodes इस तत्व पर,
हमारी सूची में 3 आइटम हैं और इस वजह से सरणी अब लंबाई 3 होनी चाहिए.
अंत में, शायद सबसे उपयोगी संपत्ति होने जा रहा है. InnerHTML,
और इस सूची की वास्तविक सामग्री होगी जो हमारे उदाहरण के पृष्ठ में
उन 3 li टैग थे.
बेशक, हम एक बड़ा दस्तावेज है, तत्वों तक पहुँचने
इस तरह से वास्तव में बोझिल होने जा रहा है क्योंकि
अंततः हम document.body.childNodes तरह बातें कहने के लिए होगा
ब्रैकेट कुछ., बाकी ब्रैकेट कुछ childNodes
और यह वास्तव में बोझिल हो रहा है.
इसके बजाय क्या हम वास्तव में क्या करना चाहते है, दस्तावेज़ क्वेरी करने में सक्षम होना
इसलिए अभी हम कीवर्ड का उपयोग कर इंटरनेट पर चीजों की खोज की तरह
हम वास्तव में संक्षेप में इस दस्तावेज़ खोज की किसी तरह की जरूरत
हम देखभाल के बारे में केवल तत्वों गुजर बिना वापस मिल
नीचे करने के लिए पूरे पेड़ के ऊपर.
सौभाग्य से, आधुनिक ब्राउज़रों हमें ऐसा करने की अनुमति
querySelectorAll नामक एक विशेष समारोह के साथ,
और इस समारोह में एक भी तर्क लेता है
कि एक सीएसएस चयनकर्ता है, और यह हमारे लिए वापस जाने के लिए जा रहा है
कि चयनकर्ता से मेल खाने वाले तत्वों के सभी.
यही कारण है कि आप डोम क्वेरी के लिए एक नया वाक्यविन्यास जानने की जरूरत नहीं है.
इसके बजाय यदि आप पहले से ही पता है कि ज्ञान लागू कर सकते हैं
सीएसएस चयनकर्ताओं के बारे में.
के दस्तावेज़ क्वेरी के कुछ उदाहरण पर एक नज़र रखना.
हम querySelectorAll कहते हैं और यह इस स्ट्रिंग # foo के पास
कि हमें आईडी foo के साथ तत्व वापस देने के लिए जा रहा है.
तुम भी document.getElementById कह सकते हैं
और यह कि हैशटैग बिना स्ट्रिंग foo के पास.
आप एक ही सटीक वस्तु वापस पाने के लिए जा रहे हैं.
बजाय हम document.querySelectorAll लिए स्ट्रिंग. बार गुजरती हैं
हम वर्ग पट्टी के साथ सभी तत्वों को वापस पाने के लिए जा रहे हैं.
हम यह भी सीएसएस चयनकर्ताओं को जोड़ सकते हैं.
हम स्ट्रिंग # foo आइएमजी में पास
छवि तत्वों के सभी हमें वापस देने के लिए जा रहा है
उस आईडी foo के साथ तत्व के बच्चे हैं.
आप देख सकते हैं, संयोजन चयनकर्ताओं द्वारा हम कुछ बहुत शक्तिशाली खोज क्षमताओं की है.
लेकिन हुड के नीचे, डोम, वास्तव में सिर्फ एक पेड़ है
और इन चयनकर्ताओं को कुछ हद तक दूर करने के लिए हमें सार की अनुमति
हम हमेशा डोम वृक्ष की पूरी संरचना के बारे में परवाह नहीं है.
यह एक त्वरित डोम का सिंहावलोकन, और हमारे साथ जुड़ने के लिए धन्यवाद किया गया.
[CS50.TV]