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 Universiteit]

3
00:00:04,000 --> 00:00:07,000
[Hierdie is CS50.] [CS50.TV]

4
00:00:07,000 --> 00:00:10,000
In hierdie video gaan ons 'n blik op die DOM te neem.

5
00:00:10,000 --> 00:00:14,000
Wanneer 'n leser laai 'n webblad, is dit nodig om verteenwoordig te word in die geheue of ander manier.

6
00:00:14,000 --> 00:00:17,000
Die dokument voorwerp model, of DOM,

7
00:00:17,000 --> 00:00:20,000
beskryf hoe die leser verteenwoordig 'n webblad in die geheue.

8
00:00:20,000 --> 00:00:24,000
In hierdie video, sal ons 'n blik op die DOM te neem in die konteks van JavaScript,

9
00:00:24,000 --> 00:00:26,000
maar DOM is 'n taal-onafhanklike konsep.

10
00:00:26,000 --> 00:00:30,000
Byvoorbeeld, PHP het sy eie DOM implementering as well.

11
00:00:30,000 --> 00:00:32,000
Dit is egter dikwels DOM benut word deur JavaScript

12
00:00:32,000 --> 00:00:36,000
sedert JavaScript ons toelaat om die inhoud van 'n webblad te verander op die vlieg,

13
00:00:36,000 --> 00:00:39,000
en DOM ons toelaat om dele van 'n webblad te bekom.

14
00:00:39,000 --> 00:00:43,000
Kom ons neem 'n blik op 'n voorbeeld webblad.

15
00:00:43,000 --> 00:00:48,000
Goed, laat ons nou sien hoe hierdie bladsy sal verteenwoordig word in die DOM.

16
00:00:48,000 --> 00:00:51,000
En al die bome moet 'n wortel node te hê aan die bokant.

17
00:00:51,000 --> 00:00:54,000
Vir hierdie dokument, die HTML element is die wortel node

18
00:00:54,000 --> 00:00:56,000
want dit is die eerste element wat verskyn.

19
00:00:56,000 --> 00:01:00,000
Kom ons voeg 'n wortel node aan ons boom.

20
00:01:00,000 --> 00:01:03,000
Kom ons neem 'n blik op die HTML dokument weer.

21
00:01:03,000 --> 00:01:09,000
Let daarop dat die liggaam tag is nes binnekant van die HTML tag.

22
00:01:09,000 --> 00:01:14,000
Dit beteken dat die liggaam element is 'n kind van die HTML element.

23
00:01:14,000 --> 00:01:17,000
Ons kan verteenwoordig hierdie in ons DOM boom deur die maak van liggaam 'n blaar

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

25
00:01:20,000 --> 00:01:22,000
Kom ons doen dit.

26
00:01:22,000 --> 00:01:24,000
Ons het liggaam onder HTML.

27
00:01:24,000 --> 00:01:28,000
Nou kan ons sien dat die liggaam het 2 kinders van sy eie,

28
00:01:28,000 --> 00:01:31,000
die H1 element en die ul element.

29
00:01:31,000 --> 00:01:34,000
Dit beteken dat ons beide van die elemente kan koppel

30
00:01:34,000 --> 00:01:36,000
na die liggaam element, so laat ons dit doen.

31
00:01:36,000 --> 00:01:40,000
Ons het 'n H1 en 'n ul.

32
00:01:40,000 --> 00:01:43,000
Ten slotte, die ul element het 3 meer kinders,

33
00:01:43,000 --> 00:01:50,000
en dit sal ons DOM boom voltooi, so laat voeg Li, li, Li.

34
00:01:50,000 --> 00:01:56,000
Dit voltooi ons DOM boom, en dit is hoe die leser jou webblad is die stoor.

35
00:01:56,000 --> 00:02:02,000
Nou kom ons neem 'n blik op hoe kan ons hierdie boom met behulp van JavaScript deurkruis.

36
00:02:02,000 --> 00:02:10,000
Ons kan toegang tot die boom met behulp van 'n spesiale JavaScript veranderlike genoem dokument.

37
00:02:10,000 --> 00:02:13,000
Een eienskap van hierdie dokument voorwerp

38
00:02:13,000 --> 00:02:16,000
is die liggaam eiendom, en die voorwerp verteenwoordig

39
00:02:16,000 --> 00:02:19,000
die liggaam element in ons voorbeeld webblad.

40
00:02:19,000 --> 00:02:23,000
As ons wou al die kinders van die liggaam element te kry,

41
00:02:23,000 --> 00:02:26,000
wat as jy onthou, is dat H1 tag en die ul tag,

42
00:02:26,000 --> 00:02:37,000
ons kan sê document.body.childNodes.

43
00:02:37,000 --> 00:02:41,000
En dit sal ons terug 'n skikking met beide die H1 element

44
00:02:41,000 --> 00:02:46,000
en die ul element want hulle is albei direkte kinders van die liggaam.

45
00:02:46,000 --> 00:02:50,000
As ons wou 'n veranderlike wat die ul element te skep

46
00:02:50,000 --> 00:02:57,000
ons kan VRR ul = dan is hierdie kode hier sê,

47
00:02:57,000 --> 00:03:00,000
En nou, omdat childNodes is bloot 'n skikking

48
00:03:00,000 --> 00:03:07,000
Ons kan kruip in dit met [1] die tweede element van die skikking te kry.

49
00:03:07,000 --> 00:03:13,000
Met hierdie nuwe ul voorwerp wat ons kan toegang tot verskeie eienskappe van die element soos sy ID.

50
00:03:13,000 --> 00:03:17,000
As ons sê ul.id wat gaan gelyk wees aan die string lys

51
00:03:17,000 --> 00:03:20,000
want dit is wat ons in ons HTML bladsy.

52
00:03:20,000 --> 00:03:24,000
Ons kan ook die tagName, wat in hierdie geval gaan wees

53
00:03:24,000 --> 00:03:32,000
watter tipe element dit is, in hierdie geval, 'n ul.

54
00:03:32,000 --> 00:03:36,000
Ons kan ook die ouer of die knoop bo dit, wat in hierdie geval

55
00:03:36,000 --> 00:03:38,000
gaan na die liggaam element wees.

56
00:03:38,000 --> 00:03:43,000
As ons sê parentNode. Wat gaan dieselfde wees as document.body.

57
00:03:43,000 --> 00:03:46,000
Van die kursus, hierdie ul het kinders van sy eie,

58
00:03:46,000 --> 00:03:50,000
sodat ons kan nog steeds sê childNodes op hierdie element.,

59
00:03:50,000 --> 00:03:55,000
en hierdie reeks behoort nou 'n lengte van 3 want daar is 3 items in die lys.

60
00:03:55,000 --> 00:04:02,000
Ten slotte, miskien die mees bruikbare eiendom gaan wees innerHTML.

61
00:04:02,000 --> 00:04:06,000
en dit sal die werklike inhoud van die lys, wat in ons voorbeeld bladsy

62
00:04:06,000 --> 00:04:08,000
was daardie 3 li tags.

63
00:04:08,000 --> 00:04:11,000
Natuurlik, as ons 'n groot dokument, toegang tot elemente

64
00:04:11,000 --> 00:04:14,000
op hierdie manier gaan wees regtig lastig, omdat

65
00:04:14,000 --> 00:04:17,000
uiteindelik sal ons dinge soos document.body.childNodes te sê

66
00:04:17,000 --> 00:04:21,000
bracket iets. childNodes bracket iets anders,

67
00:04:21,000 --> 00:04:23,000
en dit gaan om te kry regtig lastig.

68
00:04:23,000 --> 00:04:27,000
Plaas wat ons regtig wil doen, is om in staat wees om die dokument te bevraagteken,

69
00:04:27,000 --> 00:04:30,000
sodat net soos ons gesoek vir die dinge wat op die internet met behulp van sleutelwoorde

70
00:04:30,000 --> 00:04:33,000
ons regtig nodig het 'n manier van soek hierdie dokument saaklik

71
00:04:33,000 --> 00:04:37,000
terug te kry net die elemente wat ons omgee sonder deurkruis

72
00:04:37,000 --> 00:04:39,000
die hele boom bo tot onder.

73
00:04:39,000 --> 00:04:42,000
Gelukkig, moderne blaaiers kan ons dit te doen

74
00:04:42,000 --> 00:04:47,000
met 'n spesiale funksie genoem querySelectorAll,

75
00:04:47,000 --> 00:04:49,000
en hierdie funksie neem 'n enkele argument

76
00:04:49,000 --> 00:04:53,000
dit is 'n CSS selector, en dit gaan om terug te keer na ons

77
00:04:53,000 --> 00:04:56,000
al die elemente wat ooreenstem met wat selector.

78
00:04:56,000 --> 00:04:59,000
Dit beteken dat jy nie nodig het om 'n hele nuwe sintaks om te leer vir die gebruik daarvan die DOM.

79
00:04:59,000 --> 00:05:02,000
In plaas daarvan kan jy die kennis wat jy reeds weet

80
00:05:02,000 --> 00:05:04,000
oor CSS keurders.

81
00:05:04,000 --> 00:05:07,000
Kom ons neem 'n blik op 'n paar voorbeelde van bevraagteken die dokument.

82
00:05:07,000 --> 00:05:13,000
As ons sê querySelectorAll en slaag dit op hierdie string # cat

83
00:05:13,000 --> 00:05:18,000
wat gaan om te gee vir ons terug die element met die ID cat.

84
00:05:18,000 --> 00:05:23,000
Jy kan ook sê document.getElementById

85
00:05:23,000 --> 00:05:28,000
en dit slaag die string cat sonder dat hashtag.

86
00:05:28,000 --> 00:05:31,000
Jy gaan om terug te kry die presies dieselfde voorwerp.

87
00:05:31,000 --> 00:05:37,000
As in plaas ons verby die string. Bar te document.querySelectorAll

88
00:05:37,000 --> 00:05:42,000
ons gaan om terug te kry al die elemente met die klas bar.

89
00:05:42,000 --> 00:05:45,000
Ons kan ook kombineer CSS keurders.

90
00:05:45,000 --> 00:05:51,000
As ons slaag in die string # cat img

91
00:05:51,000 --> 00:05:54,000
wat gaan ons terug te gee van al die beeld elemente

92
00:05:54,000 --> 00:05:58,000
dat die kinders van die element met die ID cat.

93
00:05:58,000 --> 00:06:03,000
Soos jy kan sien, deur die kombinasie van keurders ons het 'n paar baie kragtige soek funksies.

94
00:06:03,000 --> 00:06:06,000
Maar onder die enjinkap, die DOM is regtig net 'n boom,

95
00:06:06,000 --> 00:06:10,000
en die keurders ons toelaat om abstrakte dat die weg tot 'n mate

96
00:06:10,000 --> 00:06:14,000
omdat ons nie altyd nie omgee oor die hele struktuur van die DOM boom.

97
00:06:14,000 --> 00:06:18,000
Dit was 'n vinnige oorsig van die DOM, en dankie vir die saam met ons.

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