1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [डोम]

2
00:00:02,000 --> 00:00:04,000
[टॉमी MacWilliams] [हार्वर्ड विश्वविद्यालय]

3
00:00:04,000 --> 00:00:07,000
[यह CS50 है.] [CS50.TV]

4
00:00:07,000 --> 00:00:10,000
इस वीडियो में हम डोम पर एक नज़र ले जा रहे हैं.

5
00:00:10,000 --> 00:00:14,000
एक ब्राउज़र एक वेबपेज डाउनलोड करता है, यह किसी भी तरह स्मृति में प्रतिनिधित्व करने की आवश्यकता है.

6
00:00:14,000 --> 00:00:17,000
दस्तावेज़ ऑब्जेक्ट मॉडल, या डोम,

7
00:00:17,000 --> 00:00:20,000
ब्राउज़र स्मृति में एक वेबपेज का प्रतिनिधित्व कैसे करें.

8
00:00:20,000 --> 00:00:24,000
इस वीडियो में, हम, जावास्क्रिप्ट के संदर्भ में डोम पर एक नज़र रखेंगे

9
00:00:24,000 --> 00:00:26,000
लेकिन डोम एक भाषा स्वतंत्र अवधारणा है.

10
00:00:26,000 --> 00:00:30,000
उदाहरण के लिए, PHP के रूप में अच्छी तरह से अपने स्वयं के डोम कार्यान्वयन है.

11
00:00:30,000 --> 00:00:32,000
हालांकि, डोम अक्सर जावास्क्रिप्ट द्वारा उपयोग किया जाता है

12
00:00:32,000 --> 00:00:36,000
जावास्क्रिप्ट हमें मक्खी पर एक वेबपेज की सामग्री को बदलने के लिए अनुमति देता है के बाद से,

13
00:00:36,000 --> 00:00:39,000
और डोम हमें एक वेबपेज के कुछ हिस्सों का उपयोग करने की अनुमति देता है.

14
00:00:39,000 --> 00:00:43,000
चलो एक उदाहरण के वेबपेज पर एक नज़र रखना.

15
00:00:43,000 --> 00:00:48,000
ठीक है, अब इस पृष्ठ डोम में प्रतिनिधित्व किया जाएगा कैसे देखते हैं.

16
00:00:48,000 --> 00:00:51,000
और हर पेड़ के शीर्ष पर एक रूट नोड की जरूरत है.

17
00:00:51,000 --> 00:00:54,000
इस दस्तावेज़ के लिए, HTML तत्व रूट नोड है

18
00:00:54,000 --> 00:00:56,000
क्योंकि यह प्रतीत होता है कि पहला तत्व है.

19
00:00:56,000 --> 00:01:00,000
चलो हमारे पेड़ के लिए एक रूट नोड जोड़ दें.

20
00:01:00,000 --> 00:01:03,000
चलो फिर से HTML दस्तावेज़ पर एक नज़र रखना.

21
00:01:03,000 --> 00:01:09,000
शरीर टैग HTML टैग के अंदर नेस्ट किया हुआ है कि ध्यान दें.

22
00:01:09,000 --> 00:01:14,000
यह शरीर तत्व HTML तत्व का एक बच्चा है कि इसका मतलब है.

23
00:01:14,000 --> 00:01:17,000
हम शरीर के एक पत्ता बनाकर हमारे डोम वृक्ष में यह प्रतिनिधित्व कर सकते हैं

24
00:01:17,000 --> 00:01:20,000
एचटीएमएल से उतरते.

25
00:01:20,000 --> 00:01:22,000
चलो करते हैं.

26
00:01:22,000 --> 00:01:24,000
हम HTML नीचे शरीर है.

27
00:01:24,000 --> 00:01:28,000
अब हम, कि शरीर अपने आप ही के 2 बच्चे हैं देख सकते हैं

28
00:01:28,000 --> 00:01:31,000
H1 तत्व और उल तत्व.

29
00:01:31,000 --> 00:01:34,000
यह है कि हम उन तत्वों के दोनों कनेक्ट कर सकते हैं इसका मतलब है कि

30
00:01:34,000 --> 00:01:36,000
शरीर तत्व के लिए, तो चलो करते हैं.

31
00:01:36,000 --> 00:01:40,000
हम एक H1 और एक उल है.

32
00:01:40,000 --> 00:01:43,000
अंत में, उल तत्व, 3 और बच्चों की है

33
00:01:43,000 --> 00:01:50,000
और यह हमारे डोम वृक्ष पूरा हो जाएगा, तो ली, ली, ली जोड़ने चलो.

34
00:01:50,000 --> 00:01:56,000
यह हमारे डोम वृक्ष पूरा करता है, और इस ब्राउज़र अपने वेबपेज भंडारण है कि कैसे है.

35
00:01:56,000 --> 00:02:02,000
अब हम जावास्क्रिप्ट का उपयोग कर इस वृक्ष पार कर सकते हैं पर एक नज़र रखना.

36
00:02:02,000 --> 00:02:10,000
हम दस्तावेज नामक एक विशेष जावास्क्रिप्ट चर का उपयोग कर इस वृक्ष का उपयोग कर सकते हैं.

37
00:02:10,000 --> 00:02:13,000
इस दस्तावेज़ वस्तु का एक संपत्ति

38
00:02:13,000 --> 00:02:16,000
शरीर की संपत्ति है, और इस वस्तु का प्रतिनिधित्व करता है

39
00:02:16,000 --> 00:02:19,000
हमारे उदाहरण वेबपेज में शरीर तत्व.

40
00:02:19,000 --> 00:02:23,000
हम शरीर तत्व के बच्चों के सभी प्राप्त करना चाहता था

41
00:02:23,000 --> 00:02:26,000
जो अगर तुम्हें याद है, कि H1 टैग और उल टैग है

42
00:02:26,000 --> 00:02:37,000
हम document.body.childNodes कह सकते हैं.

43
00:02:37,000 --> 00:02:41,000
और यह हमें H1 तत्व दोनों युक्त एक सरणी वापस दे देंगे

44
00:02:41,000 --> 00:02:46,000
और वे शरीर के दोनों प्रत्यक्ष बच्चों रहे हैं के बाद उल तत्व.

45
00:02:46,000 --> 00:02:50,000
हम उल तत्व का प्रतिनिधित्व करने वाले एक चर बनाने के लिए चाहते थे

46
00:02:50,000 --> 00:02:57,000
हम यहाँ VRR उल = तो इस कोड को कह सकते हैं

47
00:02:57,000 --> 00:03:00,000
और अब childNodes बस एक सरणी है क्योंकि

48
00:03:00,000 --> 00:03:07,000
हम [1] के साथ में यह सूचकांक कि सरणी का दूसरा तत्व प्राप्त करने के लिए. कर सकते हैं

49
00:03:07,000 --> 00:03:13,000
इस नए उल वस्तु के साथ हम अपने आईडी की तरह तत्व के विभिन्न गुणों का उपयोग कर सकते हैं.

50
00:03:13,000 --> 00:03:17,000
हम स्ट्रिंग सूची के बराबर होने जा रहा है कि ul.id कहते हैं

51
00:03:17,000 --> 00:03:20,000
कि हम अपने HTML पृष्ठ में क्या किया है क्योंकि.

52
00:03:20,000 --> 00:03:24,000
हम भी इस मामले में होने जा रहा है, जो अपने tagName प्राप्त कर सकते हैं

53
00:03:24,000 --> 00:03:32,000
तत्व की किस प्रकार यह इस मामले में, एक उल में है.

54
00:03:32,000 --> 00:03:36,000
हम भी अपने माता - पिता या यह ऊपर नोड, प्राप्त कर सकते हैं, जो इस मामले में

55
00:03:36,000 --> 00:03:38,000
शरीर तत्व होने जा रहा है.

56
00:03:38,000 --> 00:03:43,000
हम document.body रूप में ही किया जा रहा है. ParentNode, कहते हैं.

57
00:03:43,000 --> 00:03:46,000
बेशक, इस उल, अपने स्वयं के बच्चों की है

58
00:03:46,000 --> 00:03:50,000
इसलिए हम अभी भी कह सकते हैं. childNodes इस तत्व पर,

59
00:03:50,000 --> 00:03:55,000
हमारी सूची में 3 आइटम हैं और इस वजह से सरणी अब लंबाई 3 होनी चाहिए.

60
00:03:55,000 --> 00:04:02,000
अंत में, शायद सबसे उपयोगी संपत्ति होने जा रहा है. InnerHTML,

61
00:04:02,000 --> 00:04:06,000
और इस सूची की वास्तविक सामग्री होगी जो हमारे उदाहरण के पृष्ठ में

62
00:04:06,000 --> 00:04:08,000
उन 3 li टैग थे.

63
00:04:08,000 --> 00:04:11,000
बेशक, हम एक बड़ा दस्तावेज है, तत्वों तक पहुँचने

64
00:04:11,000 --> 00:04:14,000
इस तरह से वास्तव में बोझिल होने जा रहा है क्योंकि

65
00:04:14,000 --> 00:04:17,000
अंततः हम document.body.childNodes तरह बातें कहने के लिए होगा

66
00:04:17,000 --> 00:04:21,000
ब्रैकेट कुछ., बाकी ब्रैकेट कुछ childNodes

67
00:04:21,000 --> 00:04:23,000
और यह वास्तव में बोझिल हो रहा है.

68
00:04:23,000 --> 00:04:27,000
इसके बजाय क्या हम वास्तव में क्या करना चाहते है, दस्तावेज़ क्वेरी करने में सक्षम होना

69
00:04:27,000 --> 00:04:30,000
इसलिए अभी हम कीवर्ड का उपयोग कर इंटरनेट पर चीजों की खोज की तरह

70
00:04:30,000 --> 00:04:33,000
हम वास्तव में संक्षेप में इस दस्तावेज़ खोज की किसी तरह की जरूरत

71
00:04:33,000 --> 00:04:37,000
हम देखभाल के बारे में केवल तत्वों गुजर बिना वापस मिल

72
00:04:37,000 --> 00:04:39,000
नीचे करने के लिए पूरे पेड़ के ऊपर.

73
00:04:39,000 --> 00:04:42,000
सौभाग्य से, आधुनिक ब्राउज़रों हमें ऐसा करने की अनुमति

74
00:04:42,000 --> 00:04:47,000
querySelectorAll नामक एक विशेष समारोह के साथ,

75
00:04:47,000 --> 00:04:49,000
और इस समारोह में एक भी तर्क लेता है

76
00:04:49,000 --> 00:04:53,000
कि एक सीएसएस चयनकर्ता है, और यह हमारे लिए वापस जाने के लिए जा रहा है

77
00:04:53,000 --> 00:04:56,000
कि चयनकर्ता से मेल खाने वाले तत्वों के सभी.

78
00:04:56,000 --> 00:04:59,000
यही कारण है कि आप डोम क्वेरी के लिए एक नया वाक्यविन्यास जानने की जरूरत नहीं है.

79
00:04:59,000 --> 00:05:02,000
इसके बजाय यदि आप पहले से ही पता है कि ज्ञान लागू कर सकते हैं

80
00:05:02,000 --> 00:05:04,000
सीएसएस चयनकर्ताओं के बारे में.

81
00:05:04,000 --> 00:05:07,000
के दस्तावेज़ क्वेरी के कुछ उदाहरण पर एक नज़र रखना.

82
00:05:07,000 --> 00:05:13,000
हम querySelectorAll कहते हैं और यह इस स्ट्रिंग # foo के पास

83
00:05:13,000 --> 00:05:18,000
कि हमें आईडी foo के साथ तत्व वापस देने के लिए जा रहा है.

84
00:05:18,000 --> 00:05:23,000
तुम भी document.getElementById कह सकते हैं

85
00:05:23,000 --> 00:05:28,000
और यह कि हैशटैग बिना स्ट्रिंग foo के पास.

86
00:05:28,000 --> 00:05:31,000
आप एक ही सटीक वस्तु वापस पाने के लिए जा रहे हैं.

87
00:05:31,000 --> 00:05:37,000
बजाय हम document.querySelectorAll लिए स्ट्रिंग. बार गुजरती हैं

88
00:05:37,000 --> 00:05:42,000
हम वर्ग पट्टी के साथ सभी तत्वों को वापस पाने के लिए जा रहे हैं.

89
00:05:42,000 --> 00:05:45,000
हम यह भी सीएसएस चयनकर्ताओं को जोड़ सकते हैं.

90
00:05:45,000 --> 00:05:51,000
हम स्ट्रिंग # foo आइएमजी में पास

91
00:05:51,000 --> 00:05:54,000
छवि तत्वों के सभी हमें वापस देने के लिए जा रहा है

92
00:05:54,000 --> 00:05:58,000
उस आईडी foo के साथ तत्व के बच्चे हैं.

93
00:05:58,000 --> 00:06:03,000
आप देख सकते हैं, संयोजन चयनकर्ताओं द्वारा हम कुछ बहुत शक्तिशाली खोज क्षमताओं की है.

94
00:06:03,000 --> 00:06:06,000
लेकिन हुड के नीचे, डोम, वास्तव में सिर्फ एक पेड़ है

95
00:06:06,000 --> 00:06:10,000
और इन चयनकर्ताओं को कुछ हद तक दूर करने के लिए हमें सार की अनुमति

96
00:06:10,000 --> 00:06:14,000
हम हमेशा डोम वृक्ष की पूरी संरचना के बारे में परवाह नहीं है.

97
00:06:14,000 --> 00:06:18,000
यह एक त्वरित डोम का सिंहावलोकन, और हमारे साथ जुड़ने के लिए धन्यवाद किया गया.

98
00:06:18,000 --> 00:06:20,000
[CS50.TV]