1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [DOM]

2
00:00:02,000 --> 00:00:04,000
[Tommy MacWilliams] [Chuo Kikuu cha Harvard]

3
00:00:04,000 --> 00:00:07,000
[Hii ni CS50.] [CS50.TV]

4
00:00:07,000 --> 00:00:10,000
Katika video hii tunakwenda kuangalia DOM.

5
00:00:10,000 --> 00:00:14,000
Wakati browser downloads webpage, inahitaji kuwa na kuwakilishwa katika kumbukumbu ya namna fulani.

6
00:00:14,000 --> 00:00:17,000
kitu hati mfano, au DOM,

7
00:00:17,000 --> 00:00:20,000
inaeleza jinsi browser inawakilisha webpage katika kumbukumbu.

8
00:00:20,000 --> 00:00:24,000
Katika video hii, tutaweza kuangalia DOM katika mazingira ya JavaScript,

9
00:00:24,000 --> 00:00:26,000
lakini DOM ni dhana ya lugha-huru.

10
00:00:26,000 --> 00:00:30,000
Kwa mfano, PHP ina DOM yake mwenyewe utekelezaji pia.

11
00:00:30,000 --> 00:00:32,000
Hata hivyo, DOM ni mara nyingi itatumika kwa JavaScript

12
00:00:32,000 --> 00:00:36,000
tangu JavaScript inaruhusu sisi kubadilisha yaliyomo ya tovuti juu ya kuruka,

13
00:00:36,000 --> 00:00:39,000
na DOM inaruhusu sisi kupata sehemu ya tovuti.

14
00:00:39,000 --> 00:00:43,000
Hebu tuangalie mfano webpage.

15
00:00:43,000 --> 00:00:48,000
Sawa, sasa hebu angalia jinsi ukurasa huu itakuwa kuwakilishwa katika DOM.

16
00:00:48,000 --> 00:00:51,000
Na kila mti anahitaji kuwa na nodi mizizi kwa juu.

17
00:00:51,000 --> 00:00:54,000
Kwa waraka huu, kipengele HTML ni nodi mizizi

18
00:00:54,000 --> 00:00:56,000
sababu ni kipengele kwanza kwamba inaonekana.

19
00:00:56,000 --> 00:01:00,000
Hebu kuongeza nodi mizizi ya mti wetu.

20
00:01:00,000 --> 00:01:03,000
Hebu tuangalie hati HTML tena.

21
00:01:03,000 --> 00:01:09,000
Taarifa kwamba tag mwili ni Furushi ndani ya tag HTML.

22
00:01:09,000 --> 00:01:14,000
Hii ina maana kwamba kipengele mwili ni mtoto wa kipengele HTML.

23
00:01:14,000 --> 00:01:17,000
Tunaweza kuwakilisha jambo hili katika mti wetu DOM kwa kufanya mwili jani

24
00:01:17,000 --> 00:01:20,000
akishuka kutoka HTML.

25
00:01:20,000 --> 00:01:22,000
Hebu kufanya hivyo.

26
00:01:22,000 --> 00:01:24,000
Tuna mwili chini ya HTML.

27
00:01:24,000 --> 00:01:28,000
Sasa tunaweza kuona mwili kwamba ana watoto 2 wa peke yake,

28
00:01:28,000 --> 00:01:31,000
kipengele h1 na kipengele ul.

29
00:01:31,000 --> 00:01:34,000
Hii ina maana kwamba tunaweza kuungana wote wa mambo hayo

30
00:01:34,000 --> 00:01:36,000
kwa kipengele mwili, hivyo hebu kufanya hivyo.

31
00:01:36,000 --> 00:01:40,000
Tuna h1 na ul.

32
00:01:40,000 --> 00:01:43,000
Mwisho, kipengele ul ina 3 watoto zaidi,

33
00:01:43,000 --> 00:01:50,000
na hii itaendelea kukamilisha wetu DOM mti, hebu kuongeza li, li, li.

34
00:01:50,000 --> 00:01:56,000
Hii tamati mti wetu DOM, na hii ni jinsi browser ni hifadhi ya tovuti yako.

35
00:01:56,000 --> 00:02:02,000
Sasa hebu tuangalie jinsi tunaweza tembeeni mti huu kwa kutumia JavaScript.

36
00:02:02,000 --> 00:02:10,000
Tuweze kupata mti huu kwa kutumia maalum JavaScript variable kuitwa hati.

37
00:02:10,000 --> 00:02:13,000
Moja mali ya kitu hati hii

38
00:02:13,000 --> 00:02:16,000
ni mali ya mwili, na kitu hii inawakilisha

39
00:02:16,000 --> 00:02:19,000
kipengele mwili katika mfano tovuti yetu.

40
00:02:19,000 --> 00:02:23,000
Kama sisi alitaka kupata wote wa wana wa kipengele mwili,

41
00:02:23,000 --> 00:02:26,000
ambayo kama wewe kukumbuka ni kwamba tag h1 na tag ul,

42
00:02:26,000 --> 00:02:37,000
tunaweza kusema document.body.childNodes.

43
00:02:37,000 --> 00:02:41,000
Na hii kutoa yetu nyuma safu zenye wawili kipengele h1

44
00:02:41,000 --> 00:02:46,000
na kipengele ul tangu wao ni wa moja kwa moja watoto wa mwili.

45
00:02:46,000 --> 00:02:50,000
Kama sisi alitaka kujenga kutofautiana anayewakilisha kipengele ul

46
00:02:50,000 --> 00:02:57,000
tunaweza kusema vrr ul = basi hii kanuni hapa juu,

47
00:02:57,000 --> 00:03:00,000
na sasa kwa sababu childNodes ni tu safu

48
00:03:00,000 --> 00:03:07,000
tunaweza index ndani yake na [1] kupata kipengele pili wa safu hiyo.

49
00:03:07,000 --> 00:03:13,000
Na kitu hii mpya ul tuweze kupata mali mbalimbali ya kipengele kama ID yake.

50
00:03:13,000 --> 00:03:17,000
Tukisema ul.id kwamba kinaendelea kuwa sawa na orodha kamba

51
00:03:17,000 --> 00:03:20,000
kwa sababu hiyo ni nini sisi katika ukurasa wetu HTML.

52
00:03:20,000 --> 00:03:24,000
Tunaweza pia kupata tagName yake, ambayo katika kesi hii ni kwenda kuwa

53
00:03:24,000 --> 00:03:32,000
ni aina gani ya kipengele ni, katika kesi hii, ul.

54
00:03:32,000 --> 00:03:36,000
Tunaweza pia kupata mzazi wake au nodi juu ya hayo, ambayo katika kesi hii

55
00:03:36,000 --> 00:03:38,000
ni kwenda kuwa kipengele mwili.

56
00:03:38,000 --> 00:03:43,000
Kama sisi kusema. ParentNode, kwamba kinaendelea kuwa sawa kama document.body.

57
00:03:43,000 --> 00:03:46,000
Bila shaka, ul hii ina watoto wa peke yake,

58
00:03:46,000 --> 00:03:50,000
hivyo bado tunaweza kusema childNodes. juu ya kipengele hiki,

59
00:03:50,000 --> 00:03:55,000
na safu hii lazima sasa kuwa na urefu 3 kwa sababu kuna vitu 3 katika orodha yetu.

60
00:03:55,000 --> 00:04:02,000
Hatimaye, labda mali muhimu zaidi ni kwenda kuwa innerHTML.,

61
00:04:02,000 --> 00:04:06,000
na hii itakuwa yaliyomo halisi ya orodha, ambayo katika mfano ukurasa wetu

62
00:04:06,000 --> 00:04:08,000
walikuwa wale 3 li vitambulisho.

63
00:04:08,000 --> 00:04:11,000
Bila shaka, kama tuna hati kubwa, kupata huduma ya vipengele

64
00:04:11,000 --> 00:04:14,000
kwa namna hii ni kwenda kuwa mbaya kweli kwa sababu

65
00:04:14,000 --> 00:04:17,000
hatimaye tutaweza kuwa na kusema mambo kama document.body.childNodes

66
00:04:17,000 --> 00:04:21,000
bracket kitu. childNodes mabano kitu kingine,

67
00:04:21,000 --> 00:04:23,000
na ni kwenda kupata kweli mbaya.

68
00:04:23,000 --> 00:04:27,000
Badala yake nini sisi kweli unataka kufanya ni kuwa na uwezo wa swala hati,

69
00:04:27,000 --> 00:04:30,000
hivyo tu kama sisi searched kwa ajili ya mambo ya mtandao kwa kutumia maneno

70
00:04:30,000 --> 00:04:33,000
kweli tunahitaji baadhi ya njia ya kutafuta hati hii kwa ufupi

71
00:04:33,000 --> 00:04:37,000
kupata nyuma tu mambo ya sisi huduma ya juu bila apitaye

72
00:04:37,000 --> 00:04:39,000
nzima mti juu hadi chini.

73
00:04:39,000 --> 00:04:42,000
Kwa bahati, browsers kisasa kuruhusu sisi kufanya hivyo

74
00:04:42,000 --> 00:04:47,000
na kazi maalum iitwayo querySelectorAll,

75
00:04:47,000 --> 00:04:49,000
na kazi hii inachukua hoja moja

76
00:04:49,000 --> 00:04:53,000
kwamba ni selector CSS, na ni kwenda na kurudi kwetu

77
00:04:53,000 --> 00:04:56,000
wote wa mambo wanaofanana kwamba selector.

78
00:04:56,000 --> 00:04:59,000
Hiyo ina maana huna haja ya kujifunza nzima mwezi syntax kwa querying DOM.

79
00:04:59,000 --> 00:05:02,000
Badala yake unaweza kutumia maarifa tayari kujua

80
00:05:02,000 --> 00:05:04,000
kuhusu CSS selectors.

81
00:05:04,000 --> 00:05:07,000
Hebu tuangalie baadhi ya mifano ya querying hati.

82
00:05:07,000 --> 00:05:13,000
Tukisema querySelectorAll na kuupitisha hii kamba # foo

83
00:05:13,000 --> 00:05:18,000
hiyo ni kwenda kutupa nyuma kipengele na foo ID.

84
00:05:18,000 --> 00:05:23,000
Unaweza pia kusema document.getElementByID

85
00:05:23,000 --> 00:05:28,000
na kuupitisha foo kamba bila hashtag kwamba.

86
00:05:28,000 --> 00:05:31,000
Wewe ni kwenda kupata nyuma huo halisi kitu.

87
00:05:31,000 --> 00:05:37,000
Kama badala ya sisi kupita bar kamba. Kwa document.querySelectorAll

88
00:05:37,000 --> 00:05:42,000
tunakwenda kupata nyuma wote wa mambo na bar darasa.

89
00:05:42,000 --> 00:05:45,000
Tunaweza pia kuchanganya selectors CSS.

90
00:05:45,000 --> 00:05:51,000
Kama sisi kupita katika kamba # foo img

91
00:05:51,000 --> 00:05:54,000
hiyo ni kwenda kutupa nyuma wote wa mambo ya picha

92
00:05:54,000 --> 00:05:58,000
kwamba ni watoto wa kipengele na foo ID.

93
00:05:58,000 --> 00:06:03,000
Kama unaweza kuona, kwa selectors kuchanganya tuna baadhi ya uwezo wa kutafuta kweli nguvu.

94
00:06:03,000 --> 00:06:06,000
Lakini chini ya Hood, DOM ni kweli tu mti,

95
00:06:06,000 --> 00:06:10,000
na hizi selectors kuruhusu sisi abstract kuwa mbali na baadhi ya shahada

96
00:06:10,000 --> 00:06:14,000
kwa sababu sisi wala daima huduma kuhusu mfumo mzima wa mti DOM.

97
00:06:14,000 --> 00:06:18,000
Hiyo ilikuwa ni maelezo ya haraka ya DOM, na shukrani kwa ajili ya kujiunga nasi.

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