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

3
00:00:04,000 --> 00:00:07,000
[Ĉi tiu estas CS50.] [CS50.TV]

4
00:00:07,000 --> 00:00:10,000
En ĉi tiu video ni tuj rigardu la DOM.

5
00:00:10,000 --> 00:00:14,000
Kiam retumilo malŝarĝoj de retpaĝo, ĝi bezonas esti reprezentita en la memoro de iu maniero.

6
00:00:14,000 --> 00:00:17,000
La dokumento objekto modelo, aŭ DOM,

7
00:00:17,000 --> 00:00:20,000
priskribas kiel la retumilo reprezentas retpaĝon en memoro.

8
00:00:20,000 --> 00:00:24,000
En ĉi tiu video, ni rigardu la DOM en la kunteksto de JavaScript,

9
00:00:24,000 --> 00:00:26,000
sed DOM estas lingvo-sendependa koncepto.

10
00:00:26,000 --> 00:00:30,000
Ekzemple, PHP havas sian propran DOM efektivigo tiel.

11
00:00:30,000 --> 00:00:32,000
Tamen, DOM estas ofte uzataj de JavaScript

12
00:00:32,000 --> 00:00:36,000
ĉar JavaScript permesas al ni ŝanĝi la enhavon de retpaĝo al la flugo,

13
00:00:36,000 --> 00:00:39,000
kaj DOM nin permesas aliri partojn de retpaĝo.

14
00:00:39,000 --> 00:00:43,000
Ni rigardu ekzemplon retpaĝo.

15
00:00:43,000 --> 00:00:48,000
Okay, nun ni vidu kiel tiu paĝo estos reprezentata en la DOM.

16
00:00:48,000 --> 00:00:51,000
Kaj cxiu arbo bezonas havi radiko nodo ĉe la supro.

17
00:00:51,000 --> 00:00:54,000
Por ĉi tiu dokumento, la HTML-elemento estas la radika vertico

18
00:00:54,000 --> 00:00:56,000
ĉar ĝi estas la unua elemento kiu aperas.

19
00:00:56,000 --> 00:01:00,000
Ni aldonu radika vertico al nia arbo.

20
00:01:00,000 --> 00:01:03,000
Ni rigardu la HTML dokumento denove.

21
00:01:03,000 --> 00:01:09,000
Rimarku ke la korpo etikedo estas anidaba ene de la HTML-etikedo.

22
00:01:09,000 --> 00:01:14,000
Tio signifas, ke la korpo elemento estas infano de la HTML-elemento.

23
00:01:14,000 --> 00:01:17,000
Ni povas reprezenti tion en nia DOM arbo farante korpo folio

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

25
00:01:20,000 --> 00:01:22,000
Ni faras tion.

26
00:01:22,000 --> 00:01:24,000
Ni havas korpon sub HTML.

27
00:01:24,000 --> 00:01:28,000
Nun ni povas vidi ke korpo havas 2 infanoj de lia propra,

28
00:01:28,000 --> 00:01:31,000
la h1 elemento kaj la ul elemento.

29
00:01:31,000 --> 00:01:34,000
Tio signifas ke ni povas konekti la du de tiuj elementoj

30
00:01:34,000 --> 00:01:36,000
al la korpo elemento, do ni faru tion.

31
00:01:36,000 --> 00:01:40,000
Ni havas h1 kaj str.

32
00:01:40,000 --> 00:01:43,000
Fine, la ul elemento havas 3 filojn pli,

33
00:01:43,000 --> 00:01:50,000
kaj tio kompletigos nian DOM arbo, do ni aldonos li, li, li.

34
00:01:50,000 --> 00:01:56,000
Ĉi kompletigas nian DOM arbo, kaj tiu estas kiel la TTT-legilo estas stokante via retpaĝo.

35
00:01:56,000 --> 00:02:02,000
Nun ni rigardu kiel ni povas trairi ĉi arbo uzante JavaScript.

36
00:02:02,000 --> 00:02:10,000
Ni povas aliri ĉi arbo uzante speciala JavaScript variablo nomita dokumento.

37
00:02:10,000 --> 00:02:13,000
Unu propraĵo de ĉi tiu dokumento objekto

38
00:02:13,000 --> 00:02:16,000
estas la korpo proprieto, kaj tiu objekto prezentas

39
00:02:16,000 --> 00:02:19,000
la korpo elemento en nia ekzemplo retpaĝo.

40
00:02:19,000 --> 00:02:23,000
Se ni volis atingi ĉiujn filojn de la korpo elemento,

41
00:02:23,000 --> 00:02:26,000
kaj se vi memoras estas ke h1 etikedo kaj la ul etikedo,

42
00:02:26,000 --> 00:02:37,000
ni povas diri document.body.childNodes.

43
00:02:37,000 --> 00:02:41,000
Kaj tio donos al ni reen tabelo enhavas ambaŭ la h1 elemento

44
00:02:41,000 --> 00:02:46,000
kaj la ul elemento ĉar ili ambaŭ estas rektaj idoj de la korpo.

45
00:02:46,000 --> 00:02:50,000
Se ni volis krei variablo kiu reprezentas la ul elemento

46
00:02:50,000 --> 00:02:57,000
ni povas diri vrr ul = tiam tiu kodo tien,

47
00:02:57,000 --> 00:03:00,000
kaj nun ĉar childNodes estas simple tabelo

48
00:03:00,000 --> 00:03:07,000
ni povas indekso en ĝin kun [1] por akiri la dua elemento de tiu tabelo.

49
00:03:07,000 --> 00:03:13,000
Kun tiu nova ul objekto ni povas konsenti diversaj ecoj de la elemento kiel lia ID.

50
00:03:13,000 --> 00:03:17,000
Se ni diras ul.id tiu tuj estos egala al la kordo listo

51
00:03:17,000 --> 00:03:20,000
ĉar tio kion ni havas en nia HTML-paĝo.

52
00:03:20,000 --> 00:03:24,000
Ni povas ankaŭ trovi ĝian tagName, kiu en tiu kazo tuj estos

53
00:03:24,000 --> 00:03:32,000
kio tipo de elemento estas, en ĉi tiu kazo, str.

54
00:03:32,000 --> 00:03:36,000
Ni povas ankaŭ preni lia patro aŭ de la nodo super ĝi, kiu en tiu kazo

55
00:03:36,000 --> 00:03:38,000
tuj estos la korpo elemento.

56
00:03:38,000 --> 00:03:43,000
Se ni diras. ParentNode, ke tuj estos la sama kiel document.body.

57
00:03:43,000 --> 00:03:46,000
Kompreneble, ĉi tiu ul havas filojn de lia propra,

58
00:03:46,000 --> 00:03:50,000
do ni povas ankoraŭ diri. childNodes sur ĉi tiu ero,

59
00:03:50,000 --> 00:03:55,000
kaj ĉi tiu tabelo devus nun havi longo 3 ĉar estas 3 artikoloj en nia listo.

60
00:03:55,000 --> 00:04:02,000
Fine, eble la plej utila propraĵo tuj estos. InnerHTML,

61
00:04:02,000 --> 00:04:06,000
kaj tio estos la efektiva enhavo de la listo, kiuj en nia ekzemplo paĝo

62
00:04:06,000 --> 00:04:08,000
estis tiuj 3 span etikedoj.

63
00:04:08,000 --> 00:04:11,000
Kompreneble, se ni havas grandan dokumenton, alirante elementoj

64
00:04:11,000 --> 00:04:14,000
en ĉi tiu maniero tuj estos vere maloportuna ĉar

65
00:04:14,000 --> 00:04:17,000
fine ni devos diri aĵojn kiel document.body.childNodes

66
00:04:17,000 --> 00:04:21,000
krampo ion. childNodes krampo ion alian,

67
00:04:21,000 --> 00:04:23,000
kaj tuj ricevas vere maloportuna.

68
00:04:23,000 --> 00:04:27,000
Anstataŭ tio, kion ni vere volas fari estas povos konsulti la dokumento,

69
00:04:27,000 --> 00:04:30,000
tiel ĝuste kiel ni serĉis tion en la interreto uzante ŝlosilvortoj

70
00:04:30,000 --> 00:04:33,000
Ni vere bezonas iel de serĉado tiun dokumenton al koncize

71
00:04:33,000 --> 00:04:37,000
reiri nur la elementojn ni zorgas pri sen trairi

72
00:04:37,000 --> 00:04:39,000
la tutan arbon supre sube.

73
00:04:39,000 --> 00:04:42,000
Feliĉe, modernaj foliumiloj permesi al ni fari tion

74
00:04:42,000 --> 00:04:47,000
kun speciala funkcio nomita querySelectorAll,

75
00:04:47,000 --> 00:04:49,000
kaj ĉi tiu funkcio prenas sola argumento

76
00:04:49,000 --> 00:04:53,000
kiu estas la CSS selector, kaj gxi tuj revenos al ni

77
00:04:53,000 --> 00:04:56,000
ĉiuj elementoj kiuj kongruas ke selector.

78
00:04:56,000 --> 00:04:59,000
Tio signifas ke vi ne bezonas lerni tute novan sintakson por informpeti la DOM.

79
00:04:59,000 --> 00:05:02,000
Anstataŭe vi povas apliki la konojn vi jam scias,

80
00:05:02,000 --> 00:05:04,000
pri CSS selectores.

81
00:05:04,000 --> 00:05:07,000
Ni rigardu kelkajn ekzemplojn de informpeti la dokumento.

82
00:05:07,000 --> 00:05:13,000
Se ni diras querySelectorAll kaj fordoni ĉi string # foo

83
00:05:13,000 --> 00:05:18,000
ke tuj doni al ni redonis la elemento kun la ID foo.

84
00:05:18,000 --> 00:05:23,000
Vi povas ankaŭ diri document.getElementByID

85
00:05:23,000 --> 00:05:28,000
kaj fordoni la kordo foo sen tiu etiketo.

86
00:05:28,000 --> 00:05:31,000
Vi tuj reiros la sama ĝusta objekto.

87
00:05:31,000 --> 00:05:37,000
Se anstataŭe ni pasas la kordoj. Riglilon document.querySelectorAll

88
00:05:37,000 --> 00:05:42,000
Ni tuj reiri ĉiu el la elementoj de la klaso trinkejo.

89
00:05:42,000 --> 00:05:45,000
Ni povas ankaŭ kombini CSS selectores.

90
00:05:45,000 --> 00:05:51,000
Se ni pasas en la kordo # foo img

91
00:05:51,000 --> 00:05:54,000
ke tuj doni al ni ĉiuj revenis de la bildo elementoj

92
00:05:54,000 --> 00:05:58,000
ke estas filoj de la elemento kun la ID foo.

93
00:05:58,000 --> 00:06:03,000
Kiel vi povas vidi, kombinante selectores ni havas iujn vere potenca serĉo kapablojn.

94
00:06:03,000 --> 00:06:06,000
Sed sub la kapuĉo, la DOM estas vere nur arbo,

95
00:06:06,000 --> 00:06:10,000
kaj ĉi tiuj selectores ni permesos abstrakta ol transkuri al iu grado

96
00:06:10,000 --> 00:06:14,000
ĉar ni ne ĉiam zorgas pri la tuta strukturo de la DOM arbo.

97
00:06:14,000 --> 00:06:18,000
Tio estis rapidan superrigardon de la DOM, kaj dankon pro aliĝo al ni.

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