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] [Harvardo universiteto]

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

4
00:00:07,000 --> 00:00:10,000
Šiame video mes ketiname pažvelgti į DOM išvaizdą.

5
00:00:10,000 --> 00:00:14,000
Kai naršyklė parsisiųsti tinklalapį, ji turi būti atstovaujama atminties kažkaip.

6
00:00:14,000 --> 00:00:17,000
Objektinis modelis dokumento arba DOM,

7
00:00:17,000 --> 00:00:20,000
aprašoma, kaip naršyklė atstovauja atmintyje tinklalapį.

8
00:00:20,000 --> 00:00:24,000
Šiame vaizdo, mes pažvelgti į DOM pažvelgti į "JavaScript" kontekste,

9
00:00:24,000 --> 00:00:26,000
bet DOM kalbos nepriklausomas koncepcija.

10
00:00:26,000 --> 00:00:30,000
Pavyzdžiui, PHP turi savo DOM įgyvendinimą, taip pat.

11
00:00:30,000 --> 00:00:32,000
Tačiau DOM dažnai naudojamus JavaScript

12
00:00:32,000 --> 00:00:36,000
nuo Javaskriptą leidžia mums pakeisti tinklalapio turinį skristi,

13
00:00:36,000 --> 00:00:39,000
ir DOM leidžia mums pasiekti dalys tinklalapį.

14
00:00:39,000 --> 00:00:43,000
Paimkime bent pavyzdžiui tinklalapio išvaizdą.

15
00:00:43,000 --> 00:00:48,000
Gerai, dabar pažiūrėkime, kaip šis puslapis bus atstovaujama DOM.

16
00:00:48,000 --> 00:00:51,000
Ir kiekvienas medis turi turėti šaknų mazgas viršuje.

17
00:00:51,000 --> 00:00:54,000
Dėl šio dokumento HTML elementas yra šakninis mazgas

18
00:00:54,000 --> 00:00:56,000
nes tai pirmasis elementas, kuris pasirodo.

19
00:00:56,000 --> 00:01:00,000
Pridėkime šaknų mazgas mūsų medžiu.

20
00:01:00,000 --> 00:01:03,000
Leiskite pažvelgti į HTML dokumento išvaizdą dar kartą.

21
00:01:03,000 --> 00:01:09,000
Atkreipkite dėmesį, kad kūno tegus yra įdėtos viduje HTML žymės.

22
00:01:09,000 --> 00:01:14,000
Tai reiškia, kad kūno elementas yra HTML vaikas elemento.

23
00:01:14,000 --> 00:01:17,000
Mes galime atstovauti tai mūsų DOM medžio darant kūno lapas

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

25
00:01:20,000 --> 00:01:22,000
Leiskite tai padaryti.

26
00:01:22,000 --> 00:01:24,000
Mes turime kūną po HTML.

27
00:01:24,000 --> 00:01:28,000
Dabar matome, kad kūnas turi 2 vaikus savo,

28
00:01:28,000 --> 00:01:31,000
H1 elementas ir ul elementas.

29
00:01:31,000 --> 00:01:34,000
Tai reiškia, kad mes galime sujungti abu šiuos elementus

30
00:01:34,000 --> 00:01:36,000
prie kūno elementas, todėl galime tai padaryti.

31
00:01:36,000 --> 00:01:40,000
Turime h1 ir ul.

32
00:01:40,000 --> 00:01:43,000
Galiausiai, ul elementas yra 3 daugiau vaikų,

33
00:01:43,000 --> 00:01:50,000
ir tai bus užbaigti mūsų DOM medį, todėl galime pridėti Li, Li Li.

34
00:01:50,000 --> 00:01:56,000
Tai užbaigia mūsų DOM medį, ir tai, kaip naršyklė saugoti savo tinklalapį.

35
00:01:56,000 --> 00:02:02,000
Dabar galime pažvelgti kaip mes galime neigia šį medį, naudojant "JavaScript" išvaizdą.

36
00:02:02,000 --> 00:02:10,000
Mes galime pasiekti šį medį, naudojant specialų JavaScript kintamąjį vadinamą dokumentą.

37
00:02:10,000 --> 00:02:13,000
Vienas nuosavybė šio dokumento objektas

38
00:02:13,000 --> 00:02:16,000
yra organizacijos nuosavybė, ir šis objektas yra

39
00:02:16,000 --> 00:02:19,000
kūno elementas mūsų pavyzdyje tinklalapį.

40
00:02:19,000 --> 00:02:23,000
Jei mes norėjome gauti visus iš kūno elementas vaikams

41
00:02:23,000 --> 00:02:26,000
kuri, jei pamenate, kad H1 tegus ir ul žymeles,

42
00:02:26,000 --> 00:02:37,000
mes galime pasakyti, document.body.childNodes.

43
00:02:37,000 --> 00:02:41,000
Ir tai duos mums atgal masyvą, kuriame tiek h1 elementas

44
00:02:41,000 --> 00:02:46,000
ir ul elementas, nes jie tiek tiesioginio vaikai organizme.

45
00:02:46,000 --> 00:02:50,000
Jei mes norėjome sukurti kintamąjį atstovaujantis ul elementas

46
00:02:50,000 --> 00:02:57,000
mes galime pasakyti, VRR ul = tai kodas čia,

47
00:02:57,000 --> 00:03:00,000
ir dabar, nes ChildNodes tiesiog masyvas

48
00:03:00,000 --> 00:03:07,000
mes galime puslapis į jį su [1] gauti antrojo požymio tos masyvo.

49
00:03:07,000 --> 00:03:13,000
Su šios naujos ul objekto galime pasiekti įvairias savybes elemento kaip ir jo ID.

50
00:03:13,000 --> 00:03:17,000
Jei mes sakome ul.id tai bus lygi styginių sąrašo

51
00:03:17,000 --> 00:03:20,000
nes tai, ką mes turime mūsų puslapio HTML.

52
00:03:20,000 --> 00:03:24,000
Mes taip pat galime gauti savo tagName, kuri šiuo atveju bus

53
00:03:24,000 --> 00:03:32,000
kokio tipo elementą tai, šiuo atveju, ul.

54
00:03:32,000 --> 00:03:36,000
Mes taip pat galime gauti savo tėvų ar virš jo mazgą, kuris šiuo atveju

55
00:03:36,000 --> 00:03:38,000
bus kūno elementas.

56
00:03:38,000 --> 00:03:43,000
Jei mes sakome. ParentNode, kad tai bus kaip document.body pats.

57
00:03:43,000 --> 00:03:46,000
Žinoma, tai UL vaikus savo,

58
00:03:46,000 --> 00:03:50,000
todėl mes vis dar galime pasakyti. ChildNodes apie šio elemento,

59
00:03:50,000 --> 00:03:55,000
ir tai masyvas dabar turėtų ilgis 3, nes yra 3 prekės mūsų sąrašą.

60
00:03:55,000 --> 00:04:02,000
Galiausiai, galbūt labiausiai naudinga savybė bus. InnerHTML,

61
00:04:02,000 --> 00:04:06,000
ir tai bus tikrasis turinys sąrašą, iš kurio mūsų puslapio pavyzdys

62
00:04:06,000 --> 00:04:08,000
buvo tie 3 li žymės.

63
00:04:08,000 --> 00:04:11,000
Žinoma, jei mes turime didelį dokumentą, susipažinimo elementai

64
00:04:11,000 --> 00:04:14,000
tokiu būdu bus tikrai sudėtingas, nes

65
00:04:14,000 --> 00:04:17,000
galiausiai mes turime pasakyti dalykų, pavyzdžiui, document.body.childNodes

66
00:04:17,000 --> 00:04:21,000
laikiklis kažką. ChildNodes laikiklis kažkas,

67
00:04:21,000 --> 00:04:23,000
ir jis ketina gauti tikrai sudėtinga.

68
00:04:23,000 --> 00:04:27,000
Vietoj to, ką mes tikrai norime padaryti, tai galės užklausą dokumentą,

69
00:04:27,000 --> 00:04:30,000
taip kaip mes ieškoti dalykų internete naudodami raktinius žodžius

70
00:04:30,000 --> 00:04:33,000
mes tikrai reikia kai ieško šį dokumentą glaustai būdas

71
00:04:33,000 --> 00:04:37,000
grįžti tik tie elementai, mums rūpi be važiuojantiems

72
00:04:37,000 --> 00:04:39,000
Visas medis iš viršaus į apačią.

73
00:04:39,000 --> 00:04:42,000
Laimei, šiuolaikinių naršyklių leidžia mums tai padaryti

74
00:04:42,000 --> 00:04:47,000
su specialia funkcija vadinama querySelectorAll,

75
00:04:47,000 --> 00:04:49,000
ir ši funkcija trunka vieną argumentą

76
00:04:49,000 --> 00:04:53,000
tai CSS selektorių, ir jis ketina grįžti į mus

77
00:04:53,000 --> 00:04:56,000
visus elementus, kurie atitinka šį selektorių.

78
00:04:56,000 --> 00:04:59,000
Tai reiškia, kad jums nereikia mokytis visiškai naują sintaksę užklausų DOM.

79
00:04:59,000 --> 00:05:02,000
Vietoj to, galite taikyti žinias, jūs jau žinote,

80
00:05:02,000 --> 00:05:04,000
apie CSS selektoriai.

81
00:05:04,000 --> 00:05:07,000
Leiskite pažvelgti į kai kurių užklausų dokumentą pavyzdžių išvaizdą.

82
00:05:07,000 --> 00:05:13,000
Jei mes sakome querySelectorAll ir perduoti jį šiuo styginių # foo

83
00:05:13,000 --> 00:05:18,000
kad ketina duoti mums atgal su ID foo elementas.

84
00:05:18,000 --> 00:05:23,000
Taip pat galite sakyti document.getElementById

85
00:05:23,000 --> 00:05:28,000
ir perduoti jį eilutę foo be to hashtag.

86
00:05:28,000 --> 00:05:31,000
Jūs ketinate grįžti tą patį tiksliai objektą.

87
00:05:31,000 --> 00:05:37,000
Jei vietoj mes pereiname eilutę. Baras prie document.querySelectorAll

88
00:05:37,000 --> 00:05:42,000
mes ketiname grįžti visi su klasės baro elementais.

89
00:05:42,000 --> 00:05:45,000
Mes taip pat galime derinti CSS selektorius.

90
00:05:45,000 --> 00:05:51,000
Jei mes pereiti į styginių # foo img

91
00:05:51,000 --> 00:05:54,000
kad ketina duoti mums atgal visus vaizdo elementų

92
00:05:54,000 --> 00:05:58,000
kad yra vaikai su ID foo elementas.

93
00:05:58,000 --> 00:06:03,000
Kaip matote, derinant selektoriai turime tikrai galingą paieškos galimybes.

94
00:06:03,000 --> 00:06:06,000
Tačiau po gaubtu, DOM tikrai tik medis,

95
00:06:06,000 --> 00:06:10,000
ir šių selektoriai leidžia mums abstraktus, kad toli iki tam tikro laipsnio

96
00:06:10,000 --> 00:06:14,000
nes mes ne visada rūpi visos struktūros DOM medį.

97
00:06:14,000 --> 00:06:18,000
Tai buvo trumpa apžvalga DOM, ir ačiū, kad sutikote su mumis.

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