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] [Harvard University]

3
00:00:04,000 --> 00:00:07,000
[Þetta er CS50.] [CS50.TV]

4
00:00:07,000 --> 00:00:10,000
Í þessu myndbandi sem við erum að fara að taka a líta á the DOM.

5
00:00:10,000 --> 00:00:14,000
Þegar vafrinn niðurhal vefsíðu, það þarf að eiga fulltrúa í minni einhvern veginn.

6
00:00:14,000 --> 00:00:17,000
The mótmæla skjal líkan eða DOM,

7
00:00:17,000 --> 00:00:20,000
lýsir því hvernig vafrinn táknar vefsíðu í minni.

8
00:00:20,000 --> 00:00:24,000
Í þetta myndband, munum við taka a líta á the DOM í tengslum við Javascript,

9
00:00:24,000 --> 00:00:26,000
en DOM er tungumál óháð hugtak.

10
00:00:26,000 --> 00:00:30,000
Til dæmis, PHP hefur eigin DOM framkvæmd hennar eins og heilbrigður.

11
00:00:30,000 --> 00:00:32,000
Hins vegar er DOM oft notuð með JavaScript

12
00:00:32,000 --> 00:00:36,000
síðan JavaScript gerir okkur kleift að breyta innihaldi vefsíðu á flugu,

13
00:00:36,000 --> 00:00:39,000
og DOM gerir okkur kleift að nálgast hluta af vefsíðu.

14
00:00:39,000 --> 00:00:43,000
Láta 'taka a líta á dæmi síðunni.

15
00:00:43,000 --> 00:00:48,000
Jæja, nú skulum sjá hvernig þetta síða mun eiga fulltrúa í DOM.

16
00:00:48,000 --> 00:00:51,000
Og hvert það tré, þarf að hafa rót hnút efst.

17
00:00:51,000 --> 00:00:54,000
Fyrir þessu skjali, HTML þátturinn er rót hnút

18
00:00:54,000 --> 00:00:56,000
því það er fyrsti þáttur sem birtist.

19
00:00:56,000 --> 00:01:00,000
Skulum bæta rót hnút í tré okkar.

20
00:01:00,000 --> 00:01:03,000
Skulum taka a líta á HTML skjalinu aftur.

21
00:01:03,000 --> 00:01:09,000
Takið eftir að líkaminn tag er hreiður inni í HTML merki.

22
00:01:09,000 --> 00:01:14,000
Þetta þýðir að líkami þátturinn er barn af HTML frumefni.

23
00:01:14,000 --> 00:01:17,000
Við getum táknað þetta í DOM tré okkar með því að gera líkama blaða

24
00:01:17,000 --> 00:01:20,000
lækkandi frá HTML.

25
00:01:20,000 --> 00:01:22,000
Við skulum gera það.

26
00:01:22,000 --> 00:01:24,000
Við höfum líkama undir HTML.

27
00:01:24,000 --> 00:01:28,000
Nú getum við séð að líkami hefur 2 börn eigin,

28
00:01:28,000 --> 00:01:31,000
H1 frumefni og ul frumefni.

29
00:01:31,000 --> 00:01:34,000
Þetta þýðir að við getum tengst báðum þessum þáttum

30
00:01:34,000 --> 00:01:36,000
að líkamanum frumefni, þannig að við skulum gera það.

31
00:01:36,000 --> 00:01:40,000
Við höfum H1 og ul.

32
00:01:40,000 --> 00:01:43,000
Loks ul þátturinn hefur 3 fleiri börn,

33
00:01:43,000 --> 00:01:50,000
og þetta mun ljúka DOM tré okkar, þannig að við skulum bæta lí, lí, lí.

34
00:01:50,000 --> 00:01:56,000
Þetta lýkur DOM tré okkar, og þetta er hvernig vafrinn er sögufrægur vefsíðuna þína.

35
00:01:56,000 --> 00:02:02,000
Nú skulum taka a líta á hvernig við getum fara þetta tré með JavaScript.

36
00:02:02,000 --> 00:02:10,000
Við getum nálgast þetta tré með sérstaka JavaScript breytu sem heitir skjal.

37
00:02:10,000 --> 00:02:13,000
One eign þessu skjali hlut

38
00:02:13,000 --> 00:02:16,000
er líkami eign, og þessi hlutur táknar

39
00:02:16,000 --> 00:02:19,000
líkaminn þáttur í vefsíðuna okkar dæmi.

40
00:02:19,000 --> 00:02:23,000
Ef við vildum fá öll börn líkamanum frumefni,

41
00:02:23,000 --> 00:02:26,000
sem ef þú muna er að h1 tag og ul tag,

42
00:02:26,000 --> 00:02:37,000
við getum sagt document.body.childNodes.

43
00:02:37,000 --> 00:02:41,000
Og þetta mun gefa okkur aftur fylki sem inniheldur bæði H1 þátturinn

44
00:02:41,000 --> 00:02:46,000
og ul þáttur þar sem þeir eru bæði bein börn líkamans.

45
00:02:46,000 --> 00:02:50,000
Ef við vildum að búa til breytu fulltrúi ul frumefni

46
00:02:50,000 --> 00:02:57,000
við getum sagt vrr ul = þá er þetta númer upp hér,

47
00:02:57,000 --> 00:03:00,000
og nú vegna childNodes er einfaldlega fylki

48
00:03:00,000 --> 00:03:07,000
við getum vísitölu í það með [1] til að fá annað þáttur þeirrar fylking.

49
00:03:07,000 --> 00:03:13,000
Með þessu nýja ul hlut getum við aðgang að ýmsum eiginleikum viðkomandi frumefnis eins ID hennar.

50
00:03:13,000 --> 00:03:17,000
Ef við segjum ul.id sem er að fara að vera jafn band lista

51
00:03:17,000 --> 00:03:20,000
því það er það sem við höfum í HTML síðu okkar.

52
00:03:20,000 --> 00:03:24,000
Við getum einnig fá tagName sína, sem í þessu tilfelli er að fara að vera

53
00:03:24,000 --> 00:03:32,000
hvaða tegund af frumefni og það er, í þessu tilfelli, ul.

54
00:03:32,000 --> 00:03:36,000
Við getum einnig fá foreldri sitt eða hnút ofan það, sem í þessu tilfelli

55
00:03:36,000 --> 00:03:38,000
er að fara til vera the líkami þáttur.

56
00:03:38,000 --> 00:03:43,000
Ef við segjum. ParentNode, sem er að fara til vera the sami eins document.body.

57
00:03:43,000 --> 00:03:46,000
Auðvitað, þetta ul hefur börn eigin,

58
00:03:46,000 --> 00:03:50,000
svo við getum samt sagt. childNodes á þennan þátt,

59
00:03:50,000 --> 00:03:55,000
og þetta array ættir nú að hafa lengd 3 því það eru 3 hlutir í lista okkar.

60
00:03:55,000 --> 00:04:02,000
Að lokum, ef til vill the gagnlegur eign er að fara til vera. InnerHTML,

61
00:04:02,000 --> 00:04:06,000
og þetta mun vera raunverulegt innihald listanum, sem á síðu okkar dæmi

62
00:04:06,000 --> 00:04:08,000
voru þessir 3 li tags.

63
00:04:08,000 --> 00:04:11,000
Auðvitað, ef við höfum stórt skjal, aðgangur þætti

64
00:04:11,000 --> 00:04:14,000
með þessum hætti er að fara að vera mjög fyrirferðarmikill vegna

65
00:04:14,000 --> 00:04:17,000
lokum við verðum að segja hlutina eins document.body.childNodes

66
00:04:17,000 --> 00:04:21,000
krappi eitthvað. childNodes krappi eitthvað annað,

67
00:04:21,000 --> 00:04:23,000
og það er að fara að fá mjög fyrirferðarmikill.

68
00:04:23,000 --> 00:04:27,000
Stað þess að það sem við viljum í raun að gera er að vera fær um að fyrirspurn skjalið,

69
00:04:27,000 --> 00:04:30,000
svo bara eins og við að leita að hlutum á netinu því að nota leitarorð

70
00:04:30,000 --> 00:04:33,000
við þurfum virkilega sumir leið til að leita þetta skjal til succinctly

71
00:04:33,000 --> 00:04:37,000
komast aftur aðeins þá þætti sem við þykir vænt um án þess að fara yfir

72
00:04:37,000 --> 00:04:39,000
allt tré toppur til botn.

73
00:04:39,000 --> 00:04:42,000
Til allrar hamingju, leyfa nútíma vafrar okkur að gera þetta

74
00:04:42,000 --> 00:04:47,000
með sérstakri aðgerð sem kallast querySelectorAll,

75
00:04:47,000 --> 00:04:49,000
og þessi aðgerð tekur einn rök

76
00:04:49,000 --> 00:04:53,000
sem er CSS val, og það er að fara að fara aftur til okkar

77
00:04:53,000 --> 00:04:56,000
alla þá þætti sem samsvara þeim val.

78
00:04:56,000 --> 00:04:59,000
Það þýðir að þú þarft ekki að læra alveg nýja setningafræði til samskipta DOM.

79
00:04:59,000 --> 00:05:02,000
Stað þess að þú getur sótt þá þekkingu sem þú veist nú þegar

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

81
00:05:04,000 --> 00:05:07,000
Skulum taka a líta á nokkur dæmi um fyrirspurn skjalið.

82
00:05:07,000 --> 00:05:13,000
Ef við segjum querySelectorAll og fara framhjá það þetta band # foo

83
00:05:13,000 --> 00:05:18,000
það er að fara að gefa okkur til baka þáttur með ID foo.

84
00:05:18,000 --> 00:05:23,000
Þú getur líka sagt document.getElementById

85
00:05:23,000 --> 00:05:28,000
og gefa það í streng foo án þess hashtag.

86
00:05:28,000 --> 00:05:31,000
Þú ert að fara að fá aftur sama nákvæmlega hlut.

87
00:05:31,000 --> 00:05:37,000
Ef í staðinn við framhjá band. Bar til document.querySelectorAll

88
00:05:37,000 --> 00:05:42,000
við erum að fara að fá aftur alla þá þætti með bekknum bar.

89
00:05:42,000 --> 00:05:45,000
Við getum einnig sameina CSS selectors.

90
00:05:45,000 --> 00:05:51,000
Ef við fara í band # foo IMG

91
00:05:51,000 --> 00:05:54,000
það er að fara að gefa okkur aftur alla ímynd þætti

92
00:05:54,000 --> 00:05:58,000
sem eru börn frumefni með ID foo.

93
00:05:58,000 --> 00:06:03,000
Eins og þú sérð, með því að sameina selectors við höfum nokkrar mjög öflugar leita hæfileiki.

94
00:06:03,000 --> 00:06:06,000
En undir hetta, the DOM er í raun bara tré,

95
00:06:06,000 --> 00:06:10,000
og þessar selectors leyfa okkur að ágrip það í burtu að einhverju leyti

96
00:06:10,000 --> 00:06:14,000
vegna þess að við gerum ekki alltaf sama um allt uppbyggingu DOM tré.

97
00:06:14,000 --> 00:06:18,000
Það var fljótur yfirlit yfir DOM, og takk fyrir að taka þátt okkur.

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