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
[See on CS50.] [CS50.TV]

4
00:00:07,000 --> 00:00:10,000
Selles videos me vaatleme DOM.

5
00:00:10,000 --> 00:00:14,000
Kui brauser laeb veebileht, siis tuleb esindatud mälu kuidagi.

6
00:00:14,000 --> 00:00:17,000
Dokumendi objekti mudeli või DOM,

7
00:00:17,000 --> 00:00:20,000
kirjeldab, kuidas brauser näitab veebilehe mälu.

8
00:00:20,000 --> 00:00:24,000
Selles videos me võtame pilk DOM kontekstis JavaScript,

9
00:00:24,000 --> 00:00:26,000
kuid DOM on keelest sõltumatu mõiste.

10
00:00:26,000 --> 00:00:30,000
Näiteks PHP on oma DOM rakendamise samuti.

11
00:00:30,000 --> 00:00:32,000
Kuid DOM on sageli kasutanud JavaScript

12
00:00:32,000 --> 00:00:36,000
alates JavaScript võimaldab meil muuta sisu veebilehe lennult,

13
00:00:36,000 --> 00:00:39,000
ja DOM võimaldab meil ligipääs osade veebilehel.

14
00:00:39,000 --> 00:00:43,000
Võtame pilk näiteks veebilehel.

15
00:00:43,000 --> 00:00:48,000
Okei, nüüd vaatame, kuidas see leht on esindatud DOM.

16
00:00:48,000 --> 00:00:51,000
Ja iga puu peab olema root sõlme ülaosas.

17
00:00:51,000 --> 00:00:54,000
Selle dokumendi HTML element on juurtipust

18
00:00:54,000 --> 00:00:56,000
sest see on esimene element, mis ilmub.

19
00:00:56,000 --> 00:01:00,000
Lisame juurtipust meie puu.

20
00:01:00,000 --> 00:01:03,000
Võtame pilk HTML dokument uuesti.

21
00:01:03,000 --> 00:01:09,000
Pange tähele, et keha tag pesitses sees HTML tag.

22
00:01:09,000 --> 00:01:14,000
See tähendab, et keha element on laps HTML element.

23
00:01:14,000 --> 00:01:17,000
Me ei esinda see meie DOM puu, muutes keha lehed

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

25
00:01:20,000 --> 00:01:22,000
Teeme seda.

26
00:01:22,000 --> 00:01:24,000
Meil on keha all HTML.

27
00:01:24,000 --> 00:01:28,000
Nüüd näeme, et keha on 2 last oma,

28
00:01:28,000 --> 00:01:31,000
h1 element ja ul element.

29
00:01:31,000 --> 00:01:34,000
See tähendab, et saame ühendada nii need elemendid,

30
00:01:34,000 --> 00:01:36,000
et keha element, nii et teeme seda.

31
00:01:36,000 --> 00:01:40,000
Meil on h1 ja ul.

32
00:01:40,000 --> 00:01:43,000
Lõpuks ul element on 3 rohkem lapsi,

33
00:01:43,000 --> 00:01:50,000
ja see viib lõpule meie DOM puu, seega lisame li, li, li.

34
00:01:50,000 --> 00:01:56,000
See lõpetab meie DOM puu, ja see on see, kuidas brauser on hoidmiseks oma kodulehel.

35
00:01:56,000 --> 00:02:02,000
Nüüd vaatleme, kuidas me saame läbida seda puud kasutades JavaScript.

36
00:02:02,000 --> 00:02:10,000
Me saame kasutada seda puu kasutades spetsiaalset JavaScript muutuja nimega dokumenti.

37
00:02:10,000 --> 00:02:13,000
Üks vara käesoleva dokumendi eesmärk

38
00:02:13,000 --> 00:02:16,000
on keha vara, ja see objekt esindab

39
00:02:16,000 --> 00:02:19,000
keha element meie näites kodulehte.

40
00:02:19,000 --> 00:02:23,000
Kui me tahame, et saada kõik laste keha element,

41
00:02:23,000 --> 00:02:26,000
mis siis, kui sa mäletad, on see, et h1 tag ja ul tag,

42
00:02:26,000 --> 00:02:37,000
saame öelda document.body.childNodes.

43
00:02:37,000 --> 00:02:41,000
Ja see annab meile tagasi array mis sisaldab nii h1 element

44
00:02:41,000 --> 00:02:46,000
ja ul element, sest need on nii otsene laste organismis.

45
00:02:46,000 --> 00:02:50,000
Kui me tahtsime luua muutuja esindab ul element

46
00:02:50,000 --> 00:02:57,000
saame öelda VRR ul = siis see kood siin,

47
00:02:57,000 --> 00:03:00,000
ja nüüd, sest childNodes on lihtsalt massiivi

48
00:03:00,000 --> 00:03:07,000
saame indeks seda [1], et saada teine ​​osa, et massiivi.

49
00:03:07,000 --> 00:03:13,000
Mis see uus ul objekti suudame erinevate omadustega element nagu tema ID.

50
00:03:13,000 --> 00:03:17,000
Kui me ütleme, ul.id et see saab olema võrdne stringide nimekirja

51
00:03:17,000 --> 00:03:20,000
sest see, mida oleme meie HTML leht.

52
00:03:20,000 --> 00:03:24,000
Meil saab ka oma Muutujanimede, mis sel juhul saab olema

53
00:03:24,000 --> 00:03:32,000
millist tüüpi element on, et käesolevas asjas, ul.

54
00:03:32,000 --> 00:03:36,000
Meil saab ka tema vanema või sõlme kohale, mis antud juhul

55
00:03:36,000 --> 00:03:38,000
saab olema keha element.

56
00:03:38,000 --> 00:03:43,000
Kui me ütleme. OmanikObjekt, et see saab olema sama document.body.

57
00:03:43,000 --> 00:03:46,000
Muidugi, see ul on laste oma,

58
00:03:46,000 --> 00:03:50,000
nii et me saame veel öelda. childNodes selle element,

59
00:03:50,000 --> 00:03:55,000
ja see massiiv peaks nüüd olema pikkus 3, sest seal on 3 toodet meie nimekirjast.

60
00:03:55,000 --> 00:04:02,000
Lõpuks võibolla kõige kasulikum vara saab olema. InnerHTML,

61
00:04:02,000 --> 00:04:06,000
ja see on tegelik nimekirja sisu, mis meie näites leht

62
00:04:06,000 --> 00:04:08,000
olid 3 li sildid.

63
00:04:08,000 --> 00:04:11,000
Muidugi, kui meil on suur dokument, tutvumise elemendid

64
00:04:11,000 --> 00:04:14,000
Sel viisil saab olema tõesti tülikas, sest

65
00:04:14,000 --> 00:04:17,000
lõpuks me peame ütlema asju, nagu document.body.childNodes

66
00:04:17,000 --> 00:04:21,000
sulg midagi. childNodes sulg midagi muud,

67
00:04:21,000 --> 00:04:23,000
ja see läheb tõesti tülikas.

68
00:04:23,000 --> 00:04:27,000
Selle asemel, mida me tõesti tahame teha, on võimalik teha päringuid dokumendi

69
00:04:27,000 --> 00:04:30,000
nii nagu meiegi otsinud asju internetis märksõnade abil

70
00:04:30,000 --> 00:04:33,000
meil on tõesti vaja mõned viis otsides selles dokumendis lühidalt

71
00:04:33,000 --> 00:04:37,000
saada tagasi ainult elemendid me hoolime ilma liiklevad

72
00:04:37,000 --> 00:04:39,000
kogu puu ülevalt alla.

73
00:04:39,000 --> 00:04:42,000
Õnneks kaasaegsete brauseritega võimaldab meil seda teha

74
00:04:42,000 --> 00:04:47,000
spetsiaalne funktsioon nimega querySelectorAll,

75
00:04:47,000 --> 00:04:49,000
ja see funktsioon võtab ühe argument

76
00:04:49,000 --> 00:04:53,000
mis on CSS valijat, ja see läheb meile tagasi

77
00:04:53,000 --> 00:04:56,000
kõik elemendid, mis sobivad valijat.

78
00:04:56,000 --> 00:04:59,000
See tähendab, et sa ei pea õppima täiesti uut süntaks päringute DOM.

79
00:04:59,000 --> 00:05:02,000
Selle asemel saate rakendada teadmisi, mida juba teame

80
00:05:02,000 --> 00:05:04,000
umbes CSS valijad.

81
00:05:04,000 --> 00:05:07,000
Võtame pilk mõned näited päringu dokumendi.

82
00:05:07,000 --> 00:05:13,000
Kui me ütleme, querySelectorAll ja sinna see string # foo

83
00:05:13,000 --> 00:05:18,000
mis läheb meile tagasi elemendi ID suva.

84
00:05:18,000 --> 00:05:23,000
Võite öelda document.getElementById

85
00:05:23,000 --> 00:05:28,000
ja andke seda string foo ilma et hashtag.

86
00:05:28,000 --> 00:05:31,000
Sa lähed, et saada tagasi täpselt sama objekti.

87
00:05:31,000 --> 00:05:37,000
Kui selle asemel võtame string. Baari document.querySelectorAll

88
00:05:37,000 --> 00:05:42,000
me lähme, et saada tagasi kõik elemendid koos klassi baar.

89
00:05:42,000 --> 00:05:45,000
Me võime ühendada ka CSS valijad.

90
00:05:45,000 --> 00:05:51,000
Kui me liigu string # foo img

91
00:05:51,000 --> 00:05:54,000
mis läheb meile tagasi kõik pildi osad

92
00:05:54,000 --> 00:05:58,000
et lapsed elemendi ID suva.

93
00:05:58,000 --> 00:06:03,000
Nagu näete, ühendades valijad on meil mõned väga võimas otsing võimalustele.

94
00:06:03,000 --> 00:06:06,000
Aga kapoti alla, DOM on tõesti ainult puu,

95
00:06:06,000 --> 00:06:10,000
ja need lülitid võimaldavad meil abstraktne, et ära mingil määral

96
00:06:10,000 --> 00:06:14,000
sest me ei ole alati hoolivad kogu struktuuri DOM puu.

97
00:06:14,000 --> 00:06:18,000
See oli kiire ülevaade DOM ja Täname meiega.

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