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

3
00:00:04,000 --> 00:00:07,000
[Mae hyn yn CS50.] [CS50.TV]

4
00:00:07,000 --> 00:00:10,000
Yn y fideo hwn rydym yn mynd i edrych ar y DOM.

5
00:00:10,000 --> 00:00:14,000
Pan fydd porwr lawrlwytho dudalen we, mae angen i gael eu cynrychioli yn y cof rywsut.

6
00:00:14,000 --> 00:00:17,000
Mae'r model gwrthrych ddogfen, neu DOM,

7
00:00:17,000 --> 00:00:20,000
disgrifio sut y mae'r porwr yn cynrychioli tudalen gwe mewn cof.

8
00:00:20,000 --> 00:00:24,000
Yn y fideo, byddwn yn edrych ar y DOM yng nghyd-destun JavaScript,

9
00:00:24,000 --> 00:00:26,000
ond mae DOM yn gysyniad ieithyddol-annibynnol.

10
00:00:26,000 --> 00:00:30,000
Er enghraifft, PHP wedi ei weithredu DOM ei hun yn ogystal.

11
00:00:30,000 --> 00:00:32,000
Fodd bynnag, mae DOM yn cael ei ddefnyddio'n aml gan JavaScript

12
00:00:32,000 --> 00:00:36,000
ers JavaScript yn ein galluogi i newid y cynnwys tudalen we ar y hedfan,

13
00:00:36,000 --> 00:00:39,000
a DOM yn ein galluogi i gael mynediad i rannau o dudalen we.

14
00:00:39,000 --> 00:00:43,000
Gadewch i ni edrych ar enghraifft tudalen we.

15
00:00:43,000 --> 00:00:48,000
Iawn, yn awr gadewch i ni weld sut y bydd y dudalen hon yn cael ei gynrychioli yn y DOM.

16
00:00:48,000 --> 00:00:51,000
Ac mae angen i bob coeden gael nod gwraidd ar y brig.

17
00:00:51,000 --> 00:00:54,000
Ar gyfer y ddogfen hon, mae'r elfen HTML yw'r nod gwraidd

18
00:00:54,000 --> 00:00:56,000
oherwydd ei fod yn yr elfen gyntaf sy'n ymddangos.

19
00:00:56,000 --> 00:01:00,000
Gadewch i ni ychwanegu nod gwraidd i'n goeden.

20
00:01:00,000 --> 00:01:03,000
Gadewch i ni edrych ar y ddogfen HTML eto.

21
00:01:03,000 --> 00:01:09,000
Sylwch fod y tag corff yn nythu tu mewn i'r tag HTML.

22
00:01:09,000 --> 00:01:14,000
Mae hyn yn golygu bod yr elfen corff yn blentyn yr elfen HTML.

23
00:01:14,000 --> 00:01:17,000
Gallwn gynrychioli hyn yn ein goeden DOM gan gorff deilen gwneud

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

25
00:01:20,000 --> 00:01:22,000
Gadewch i ni wneud hynny.

26
00:01:22,000 --> 00:01:24,000
Mae gennym gorff o dan HTML.

27
00:01:24,000 --> 00:01:28,000
Nawr gallwn weld y corff hwnnw wedi 2 blant ei hun,

28
00:01:28,000 --> 00:01:31,000
yr elfen h1 a'r elfen ul.

29
00:01:31,000 --> 00:01:34,000
Mae hyn yn golygu y gallwn gysylltu ddau o'r elfennau hynny

30
00:01:34,000 --> 00:01:36,000
at yr elfen corff, felly gadewch i ni wneud hynny.

31
00:01:36,000 --> 00:01:40,000
Mae gennym h1 a ul.

32
00:01:40,000 --> 00:01:43,000
Yn olaf, yr elfen ul Mae 3 fwy o blant,

33
00:01:43,000 --> 00:01:50,000
a bydd hyn yn cwblhau ein goeden DOM, felly gadewch i ni ychwanegu li, li, li.

34
00:01:50,000 --> 00:01:56,000
Mae hyn yn cwblhau ein goeden DOM, a dyma sut y mae'r porwr yn storio eich tudalen we.

35
00:01:56,000 --> 00:02:02,000
Nawr, gadewch i ni edrych ar sut y gallwn tramwyo goeden hwn gan ddefnyddio JavaScript.

36
00:02:02,000 --> 00:02:10,000
Gallwn gael mynediad goeden hon gan ddefnyddio newidyn JavaScript arbennig o'r enw ddogfen.

37
00:02:10,000 --> 00:02:13,000
Un o briodweddau ddogfen hon gwrthrych

38
00:02:13,000 --> 00:02:16,000
yw'r eiddo corff, ac mae hyn yn gwrthrych yn cynrychioli

39
00:02:16,000 --> 00:02:19,000
yr elfen corff mewn 'n enghraifft tudalen we.

40
00:02:19,000 --> 00:02:23,000
Os ydym yn awyddus i gael yr holl o'r plant yr elfen corff,

41
00:02:23,000 --> 00:02:26,000
ac os ydych gofio yw bod tag h1 a'r tag ul,

42
00:02:26,000 --> 00:02:37,000
gallwn ddweud document.body.childNodes.

43
00:02:37,000 --> 00:02:41,000
A fydd hyn yn rhoi i ni yn ôl amrywiaeth sy'n cynnwys yr elfen h1

44
00:02:41,000 --> 00:02:46,000
a'r elfen ul gan eu bod yn blant uniongyrchol y corff.

45
00:02:46,000 --> 00:02:50,000
Os ydym am greu newidyn cynrychioli'r elfen ul

46
00:02:50,000 --> 00:02:57,000
gallwn ddweud vrr ul = yna mae hyn yn cod i fyny yma,

47
00:02:57,000 --> 00:03:00,000
ac yn awr oherwydd, yn syml, childNodes arae

48
00:03:00,000 --> 00:03:07,000
gallwn mynegai i mewn iddo gyda [1] i gael ail elfen o'r rhesi.

49
00:03:07,000 --> 00:03:13,000
Gyda hyn gwrthrych ul newydd gallwn gael mynediad gwahanol nodweddion yr elfen fel ei adnabod.

50
00:03:13,000 --> 00:03:17,000
Os dywedwn ul.id sy'n mynd i fod yn hafal i'r rhestr llinyn

51
00:03:17,000 --> 00:03:20,000
oherwydd dyna beth sydd gennym yn ein tudalen HTML.

52
00:03:20,000 --> 00:03:24,000
Gall Rydym hefyd yn cael ei tagName, sydd, yn yr achos hwn yn mynd i fod

53
00:03:24,000 --> 00:03:32,000
pa fath o elfen ydyw, yn yr achos hwn, ul.

54
00:03:32,000 --> 00:03:36,000
Gall Rydym hefyd yn cael ei riant neu y nod uchod, sydd, yn yr achos hwn

55
00:03:36,000 --> 00:03:38,000
yn mynd i fod yr elfen corff.

56
00:03:38,000 --> 00:03:43,000
Os dywedwn. ParentNode, mae hynny'n mynd i fod yr un fath â document.body.

57
00:03:43,000 --> 00:03:46,000
Wrth gwrs, mae hyn yn ul ​​blant ei hun,

58
00:03:46,000 --> 00:03:50,000
er mwyn i ni dal i ddweud. childNodes ar yr elfen hon,

59
00:03:50,000 --> 00:03:55,000
a dylai amrywiaeth hwn yn awr yn cael hyd 3 gan fod 3 eitem yn ein rhestr.

60
00:03:55,000 --> 00:04:02,000
Yn olaf, efallai yr eiddo mwyaf defnyddiol yn mynd i fod. InnerHTML,

61
00:04:02,000 --> 00:04:06,000
a bydd hyn yn cynnwys gwirioneddol y rhestr, sydd yn ein tudalen enghraifft

62
00:04:06,000 --> 00:04:08,000
oedd y rhai 3 tagiau li.

63
00:04:08,000 --> 00:04:11,000
Wrth gwrs, os oes gennym dogfen fawr, cael gafael ar elfennau

64
00:04:11,000 --> 00:04:14,000
yn y modd hwn yn mynd i fod yn wirioneddol drafferthus oherwydd

65
00:04:14,000 --> 00:04:17,000
yn y pen draw bydd rhaid i ni ddweud pethau fel document.body.childNodes

66
00:04:17,000 --> 00:04:21,000
rhywbeth braced. childNodes braced rhywbeth arall,

67
00:04:21,000 --> 00:04:23,000
ac mae'n mynd i ca 'n sylweddol feichus.

68
00:04:23,000 --> 00:04:27,000
Yn hytrach yr hyn yr ydym wir eisiau ei wneud yw gallu holi y ddogfen,

69
00:04:27,000 --> 00:04:30,000
felly yn union fel rydym yn chwilio am bethau ar y rhyngrwyd drwy ddefnyddio geiriau allweddol

70
00:04:30,000 --> 00:04:33,000
mae gwir angen rhyw ffordd o chwilio ddogfen hon i gryno

71
00:04:33,000 --> 00:04:37,000
cael dim ond yr elfennau yr ydym yn gofalu am yn ôl heb croesi

72
00:04:37,000 --> 00:04:39,000
brig goeden gyfan i'r gwaelod.

73
00:04:39,000 --> 00:04:42,000
Yn ffodus, porwyr modern yn ein galluogi i wneud hyn

74
00:04:42,000 --> 00:04:47,000
gyda swyddogaeth arbennig o'r enw querySelectorAll,

75
00:04:47,000 --> 00:04:49,000
a swyddogaeth hon yn ddadl sengl

76
00:04:49,000 --> 00:04:53,000
hynny yw dewiswr CSS, ac mae'n mynd i ddychwelyd i ni

77
00:04:53,000 --> 00:04:56,000
pob un o'r elfennau sy'n cyfateb i'r dewisydd.

78
00:04:56,000 --> 00:04:59,000
Mae hynny'n golygu nad oes angen i chi ddysgu cystrawen newydd sbon ar gyfer ymholi i'r DOM.

79
00:04:59,000 --> 00:05:02,000
Yn hytrach, gallwch wneud cais i'r wybodaeth yr ydych eisoes yn ei wybod

80
00:05:02,000 --> 00:05:04,000
am ddewiswyr CSS.

81
00:05:04,000 --> 00:05:07,000
Gadewch i ni edrych ar rai enghreifftiau o ymholi y ddogfen.

82
00:05:07,000 --> 00:05:13,000
Os dywedwn querySelectorAll ac yn ei throsglwyddo y llinyn # foo

83
00:05:13,000 --> 00:05:18,000
mae hynny'n mynd i roi i ni yn ôl yr elfen gyda'r ID foo.

84
00:05:18,000 --> 00:05:23,000
Gallwch hefyd ddweud document.getElementByID

85
00:05:23,000 --> 00:05:28,000
ac yn ei throsglwyddo i'r llinyn foo heb y hashtag.

86
00:05:28,000 --> 00:05:31,000
Rydych yn mynd i fynd yn ôl yr un union gwrthrych.

87
00:05:31,000 --> 00:05:37,000
Os yn lle hynny rydym yn llwyddo yn y llinyn. Bar i document.querySelectorAll

88
00:05:37,000 --> 00:05:42,000
rydym yn mynd i fynd yn ôl yr holl elfennau gyda'r bar dosbarth.

89
00:05:42,000 --> 00:05:45,000
Gallwn hefyd gyfuno detholwyr CSS.

90
00:05:45,000 --> 00:05:51,000
Os byddwn yn pasio yn y llinyn # foo img

91
00:05:51,000 --> 00:05:54,000
mae hynny'n mynd i roi i ni yn ôl yr holl elfennau ddelwedd

92
00:05:54,000 --> 00:05:58,000
bod yn blant yr elfen gyda'r ID foo.

93
00:05:58,000 --> 00:06:03,000
Fel y gallwch weld, drwy gyfuno dewiswyr mae gennym rai galluoedd chwilio pwerus iawn.

94
00:06:03,000 --> 00:06:06,000
Ond o dan y cwfl, mae'r DOM mewn gwirionedd yn unig goeden,

95
00:06:06,000 --> 00:06:10,000
a dewiswyr hyn yn ein galluogi i dynnu bod i ffwrdd i ryw raddau

96
00:06:10,000 --> 00:06:14,000
oherwydd nid ydym bob amser yn poeni am y strwythur cyfan y goeden DOM.

97
00:06:14,000 --> 00:06:18,000
A oedd yn drosolwg cyflym o'r DOM, a diolch am ymuno â ni.

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