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
[Dette er CS50.] [CS50.TV]

4
00:00:07,000 --> 00:00:10,000
I denne video vil vi tage et kig på DOM.

5
00:00:10,000 --> 00:00:14,000
Når en browser downloader en webside, skal det være repræsenteret i hukommelsen eller anden måde.

6
00:00:14,000 --> 00:00:17,000
Dokumentet objekt model eller DOM,

7
00:00:17,000 --> 00:00:20,000
beskriver, hvordan browseren repræsenterer en webside i hukommelsen.

8
00:00:20,000 --> 00:00:24,000
I denne video, vil vi tage et kig på DOM i forbindelse med JavaScript

9
00:00:24,000 --> 00:00:26,000
men DOM er et sprog-uafhængig koncept.

10
00:00:26,000 --> 00:00:30,000
For eksempel har PHP sin egen DOM gennemførelse samt.

11
00:00:30,000 --> 00:00:32,000
Men DOM ofte anvendes af JavaScript

12
00:00:32,000 --> 00:00:36,000
da JavaScript giver os mulighed for at ændre indholdet af en webside på flue,

13
00:00:36,000 --> 00:00:39,000
og DOM giver os adgang til dele af en webside.

14
00:00:39,000 --> 00:00:43,000
Lad os tage et kig på et eksempel webside.

15
00:00:43,000 --> 00:00:48,000
Okay, lad os nu se, hvordan denne side vil blive repræsenteret i DOM.

16
00:00:48,000 --> 00:00:51,000
Og hvert træ skal have en rod node på toppen.

17
00:00:51,000 --> 00:00:54,000
For dette dokument er HTML-element roden node

18
00:00:54,000 --> 00:00:56,000
fordi det er det første element, der vises.

19
00:00:56,000 --> 00:01:00,000
Lad os tilføje en rod node til vores træ.

20
00:01:00,000 --> 00:01:03,000
Lad os tage et kig på HTML-dokumentet igen.

21
00:01:03,000 --> 00:01:09,000
Bemærk, at body-tagget er indlejret inde i HTML-tag.

22
00:01:09,000 --> 00:01:14,000
Det betyder, at kroppen element er et barn af HTML-element.

23
00:01:14,000 --> 00:01:17,000
Vi kan repræsentere dette i vores DOM-træet ved at gøre kroppen et blad

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

25
00:01:20,000 --> 00:01:22,000
Lad os gøre det.

26
00:01:22,000 --> 00:01:24,000
Vi har krop under HTML.

27
00:01:24,000 --> 00:01:28,000
Nu kan vi se, at kroppen har 2 børn på sin egen,

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

29
00:01:31,000 --> 00:01:34,000
Det betyder, at vi kan forbinde begge disse elementer

30
00:01:34,000 --> 00:01:36,000
til kroppen element, så lad os gøre det.

31
00:01:36,000 --> 00:01:40,000
Vi har en h1 og et ul.

32
00:01:40,000 --> 00:01:43,000
Endelig ul element har 3 børn,

33
00:01:43,000 --> 00:01:50,000
og dette vil udfylde vores DOM-træet, så lad os tilføje li, li, li.

34
00:01:50,000 --> 00:01:56,000
Dette afslutter vores DOM-træet, og det er sådan browseren gemmer din webside.

35
00:01:56,000 --> 00:02:02,000
Lad os nu tage et kig på, hvordan vi kan krydse dette træ ved hjælp af JavaScript.

36
00:02:02,000 --> 00:02:10,000
Vi kan få adgang til dette træ ved hjælp af en speciel JavaScript variabel kaldet dokument.

37
00:02:10,000 --> 00:02:13,000
Én egenskab af dette dokument objekt

38
00:02:13,000 --> 00:02:16,000
er kroppen ejendom, og dette formål er

39
00:02:16,000 --> 00:02:19,000
kroppen element i vores eksempel webside.

40
00:02:19,000 --> 00:02:23,000
Hvis vi ønskede at få alle børn i kroppen element

41
00:02:23,000 --> 00:02:26,000
som, hvis du kan huske, er, at h1 tag og ul tag,

42
00:02:26,000 --> 00:02:37,000
kan vi sige document.body.childNodes.

43
00:02:37,000 --> 00:02:41,000
Og det vil give os tilbage et array indeholdende både h1 element

44
00:02:41,000 --> 00:02:46,000
og ul element, da de er både direkte børn af kroppen.

45
00:02:46,000 --> 00:02:50,000
Hvis vi ønskede at oprette en variabel, der repræsenterer ul element

46
00:02:50,000 --> 00:02:57,000
vi kan sige VRR ul = så denne kode heroppe,

47
00:02:57,000 --> 00:03:00,000
og nu, fordi childNodes er simpelthen et array

48
00:03:00,000 --> 00:03:07,000
Vi kan indeksere ind i det med [1] for at få det andet element i denne array.

49
00:03:07,000 --> 00:03:13,000
Med denne nye ul objekt, vi kan få adgang til forskellige egenskaber for elementet ligesom sine id.

50
00:03:13,000 --> 00:03:17,000
Hvis vi siger ul.id der kommer til at være lig med strengen listen

51
00:03:17,000 --> 00:03:20,000
fordi det er hvad vi har i vores HTML-side.

52
00:03:20,000 --> 00:03:24,000
Vi kan også få sin tagname, som i dette tilfælde vil være

53
00:03:24,000 --> 00:03:32,000
hvilken type element er det, i dette tilfælde en ul.

54
00:03:32,000 --> 00:03:36,000
Vi kan også få dets moderselskab eller knuden over det, som i dette tilfælde

55
00:03:36,000 --> 00:03:38,000
kommer til at være det organ element.

56
00:03:38,000 --> 00:03:43,000
Hvis vi siger. ParentNode, der kommer til at være den samme som document.body.

57
00:03:43,000 --> 00:03:46,000
Selvfølgelig har denne ul børn af sine egne,

58
00:03:46,000 --> 00:03:50,000
så vi stadig kan sige. childNodes om dette element,

59
00:03:50,000 --> 00:03:55,000
og dette array skulle nu have længde 3, fordi der er 3 på vores liste.

60
00:03:55,000 --> 00:04:02,000
Endelig, måske den mest nyttige ejendom vil være. InnerHTML,

61
00:04:02,000 --> 00:04:06,000
og dette vil være det faktiske indhold af den liste, som i vores eksempel side

62
00:04:06,000 --> 00:04:08,000
var de 3 li tags.

63
00:04:08,000 --> 00:04:11,000
Selvfølgelig, hvis vi har et stort dokument, adgang elementer

64
00:04:11,000 --> 00:04:14,000
på denne måde kommer til at være virkelig besværligt, fordi

65
00:04:14,000 --> 00:04:17,000
sidst vi bliver nødt til at sige ting som document.body.childNodes

66
00:04:17,000 --> 00:04:21,000
beslag noget. childNodes beslag noget andet,

67
00:04:21,000 --> 00:04:23,000
og det kommer til at blive rigtig besværlig.

68
00:04:23,000 --> 00:04:27,000
I stedet, hvad vi virkelig ønsker at gøre, er at være i stand til at søge i dokumentet,

69
00:04:27,000 --> 00:04:30,000
så ligesom vi efter ting på internettet ved hjælp af søgeord

70
00:04:30,000 --> 00:04:33,000
vi virkelig har brug for nogle måde at søge dette dokument kortfattet

71
00:04:33,000 --> 00:04:37,000
komme tilbage kun elementer, vi holder af, uden gennemkører

72
00:04:37,000 --> 00:04:39,000
hele træet top til bund.

73
00:04:39,000 --> 00:04:42,000
Heldigvis moderne browsere tillader os at gøre dette

74
00:04:42,000 --> 00:04:47,000
med en speciel funktion kaldet querySelectorAll,

75
00:04:47,000 --> 00:04:49,000
og denne funktion tager et enkelt argument

76
00:04:49,000 --> 00:04:53,000
der er en CSS selector, og det kommer til at vende tilbage til os

77
00:04:53,000 --> 00:04:56,000
alle de elementer, der svarer til, at vælgeren.

78
00:04:56,000 --> 00:04:59,000
Det betyder at du ikke behøver at lære en helt ny syntaks til at forespørge DOM.

79
00:04:59,000 --> 00:05:02,000
I stedet kan du anvende den viden, du allerede kender

80
00:05:02,000 --> 00:05:04,000
om CSS selektorer.

81
00:05:04,000 --> 00:05:07,000
Lad os tage et kig på nogle eksempler på forespørge dokumentet.

82
00:05:07,000 --> 00:05:13,000
Hvis vi siger querySelectorAll og videregive det denne streng # foo

83
00:05:13,000 --> 00:05:18,000
der kommer til at give os tilbage elementet med ID foo.

84
00:05:18,000 --> 00:05:23,000
Du kan også sige document.getElementById

85
00:05:23,000 --> 00:05:28,000
og videregive det strengen foo uden denne hashtag.

86
00:05:28,000 --> 00:05:31,000
Du kommer til at komme tilbage den samme nøjagtige objekt.

87
00:05:31,000 --> 00:05:37,000
Hvis vi i stedet passerer strengen. Bar for at document.querySelectorAll

88
00:05:37,000 --> 00:05:42,000
vi vil komme tilbage alle de elementer med klassen baren.

89
00:05:42,000 --> 00:05:45,000
Vi kan også kombinere CSS selektorer.

90
00:05:45,000 --> 00:05:51,000
Hvis vi passerer i strengen # foo img

91
00:05:51,000 --> 00:05:54,000
der kommer til at give os tilbage alle de billedelementer

92
00:05:54,000 --> 00:05:58,000
der er børn af elementet med ID foo.

93
00:05:58,000 --> 00:06:03,000
Som du kan se, ved at kombinere selektorer har vi nogle virkelig effektive søgefunktioner.

94
00:06:03,000 --> 00:06:06,000
Men under motorhjelmen, er DOM egentlig bare et træ,

95
00:06:06,000 --> 00:06:10,000
, og disse vælgere tillade os at abstract det væk til en vis grad

96
00:06:10,000 --> 00:06:14,000
fordi vi ikke altid bekymre sig om hele strukturen i DOM-træet.

97
00:06:14,000 --> 00:06:18,000
Det var en hurtig overblik over DOM, og tak for at tilslutte os.

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