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] [Inivèsite Harvard]

3
00:00:04,000 --> 00:00:07,000
[Sa a se CS50.] [CS50.TV]

4
00:00:07,000 --> 00:00:10,000
Nan videyo sa a nou pral pran yon gade nan Dom la.

5
00:00:10,000 --> 00:00:14,000
Lè yon navigatè downloads yon Paj Web, li bezwen yo dwe reprezante nan memwa yon jan kanmenm.

6
00:00:14,000 --> 00:00:17,000
Modèl la objè dokiman, oswa Dom,

7
00:00:17,000 --> 00:00:20,000
dekri kijan navigatè a reprezante yon Paj Web nan memwa.

8
00:00:20,000 --> 00:00:24,000
Nan videyo sa a, nou pral pran yon gade nan Dom a nan yon kontèks la nan JavaScript,

9
00:00:24,000 --> 00:00:26,000
men Dom se yon konsèp lang-endepandan.

10
00:00:26,000 --> 00:00:30,000
Pou egzanp, PHP li gen pwòp Dom aplikasyon kòm byen.

11
00:00:30,000 --> 00:00:32,000
Sepandan, Dom se souvan itilize pa JavaScript

12
00:00:32,000 --> 00:00:36,000
depi JavaScript pèmèt nou chanje sa ki nan yon Paj Web sou vole a,

13
00:00:36,000 --> 00:00:39,000
ak Dom pèmèt nou gen aksè a pati nan yon Paj Web.

14
00:00:39,000 --> 00:00:43,000
Ann pran yon gade nan yon Paj Web egzanp.

15
00:00:43,000 --> 00:00:48,000
Okay, kounye a kite a wè ki jan yo pral paj sa a dwe reprezante nan Dom la.

16
00:00:48,000 --> 00:00:51,000
Men, tout pyebwa ki bezwen gen yon ne rasin nan tèt la.

17
00:00:51,000 --> 00:00:54,000
Pou dokiman sa a, eleman ki HTML se ne a rasin

18
00:00:54,000 --> 00:00:56,000
paske li nan eleman an premye ki parèt.

19
00:00:56,000 --> 00:01:00,000
Se pou yo ajoute yon ne rasin pyebwa nou yo.

20
00:01:00,000 --> 00:01:03,000
Ann pran yon gade nan dokiman an HTML ankò.

21
00:01:03,000 --> 00:01:09,000
Remake se tag nan kò nich andedan nan tag nan HTML.

22
00:01:09,000 --> 00:01:14,000
Sa vle di ke eleman nan kò se yon timoun nan eleman nan HTML.

23
00:01:14,000 --> 00:01:17,000
Nou ka reprezante sa a nan pye bwa Dom nou an pa fè kò yon fèy

24
00:01:17,000 --> 00:01:20,000
desann sot nan HTML.

25
00:01:20,000 --> 00:01:22,000
Se pou yo fè sa.

26
00:01:22,000 --> 00:01:24,000
Nou gen kò anba HTML.

27
00:01:24,000 --> 00:01:28,000
Koulye a, nou ka wè ke kò a gen 2 timoun nan pwòp li yo,

28
00:01:28,000 --> 00:01:31,000
H1 eleman an ak eleman nan ul.

29
00:01:31,000 --> 00:01:34,000
Sa vle di ke nou ka konekte tou de nan sa yo eleman

30
00:01:34,000 --> 00:01:36,000
eleman nan kò, se konsa kite a fè sa.

31
00:01:36,000 --> 00:01:40,000
Nou gen yon H1 ak UL yon.

32
00:01:40,000 --> 00:01:43,000
Finalman, eleman ki UL gen 3 plis timoun,

33
00:01:43,000 --> 00:01:50,000
ak sa a pral konplete pyebwa Dom nou an, kidonk kite a ajoute Li, Li, Li.

34
00:01:50,000 --> 00:01:56,000
Sa a konplete pyebwa Dom nou an, ak sa a se ki jan navigatè a se estoke Paj Web ou.

35
00:01:56,000 --> 00:02:02,000
Koulye a, kite a pran yon gade nan ki jan nou ka Traverse pye bwa sa a lè l sèvi avèk JavaScript.

36
00:02:02,000 --> 00:02:10,000
Nou kapab jwenn aksè pye bwa sa a lè l sèvi avèk yon varyab JavaScript espesyal ki rele dokiman.

37
00:02:10,000 --> 00:02:13,000
Yon pwopriyete nan sa a objè dokiman

38
00:02:13,000 --> 00:02:16,000
se pwopriyete a kò, ak sa a objè reprezante

39
00:02:16,000 --> 00:02:19,000
kò eleman an nan Paj Web egzanp nou an.

40
00:02:19,000 --> 00:02:23,000
Si nou te vle jwenn tout timoun yo nan eleman nan kò,

41
00:02:23,000 --> 00:02:26,000
ki si ou sonje se ke tag H1 ak tag a UL,

42
00:02:26,000 --> 00:02:37,000
nou ka di document.body.childNodes.

43
00:02:37,000 --> 00:02:41,000
Lè sa a pral ban nou tounen yon etalaj ki gen tou de H1 eleman nan

44
00:02:41,000 --> 00:02:46,000
ak eleman ki UL depi yo ap tou de timoun yo dirèk nan kò a.

45
00:02:46,000 --> 00:02:50,000
Si nou te vle kreye yon varyab ki reprezante eleman ki UL

46
00:02:50,000 --> 00:02:57,000
nou ka di vrr UL = Lè sa a, sa a Kòd moute isit la,

47
00:02:57,000 --> 00:03:00,000
e kounye a, paske childNodes se tou senpleman yon etalaj

48
00:03:00,000 --> 00:03:07,000
nou kapab endèks nan li ak [1] jwenn eleman an dezyèm nan ki etalaj.

49
00:03:07,000 --> 00:03:13,000
Avèk sa a objè UL nouvo nou ka gen aksè nan pwopriyete divès kalite eleman ki tankou ID li yo.

50
00:03:13,000 --> 00:03:17,000
Si nou di ul.id ki k ap pase yo dwe egal a lis la fisèl

51
00:03:17,000 --> 00:03:20,000
paske se sa ki nou genyen nan paj HTML nou an.

52
00:03:20,000 --> 00:03:24,000
Nou kapab tou jwenn tagName li yo, ki nan ka sa a ki pral yo dwe

53
00:03:24,000 --> 00:03:32,000
ki kalite eleman li se, nan ka sa a, yon ul.

54
00:03:32,000 --> 00:03:36,000
Nou kapab tou jwenn paran li yo oswa ne ki pi wo a li, ki nan ka sa a

55
00:03:36,000 --> 00:03:38,000
a pwal eleman nan kò.

56
00:03:38,000 --> 00:03:43,000
Si nou di. ParentNode, ki k ap pase yo dwe menm bagay la tou kòm document.body.

57
00:03:43,000 --> 00:03:46,000
Natirèlman, sa a UL gen timoun nan pwòp li yo,

58
00:03:46,000 --> 00:03:50,000
pou nou ka toujou di. childNodes sou sa a eleman,

59
00:03:50,000 --> 00:03:55,000
ak sa a etalaj yo ta dwe kounye a gen longè 3 paske gen 3 atik nan lis nou an.

60
00:03:55,000 --> 00:04:02,000
Finalman, petèt pwopriyete a pi itil a pwal. InnerHTML,

61
00:04:02,000 --> 00:04:06,000
ak sa a pral sa ki aktyèl la nan lis la, ki nan paj egzanp nou an

62
00:04:06,000 --> 00:04:08,000
se te sila yo 3 Tags Li.

63
00:04:08,000 --> 00:04:11,000
Natirèlman, si nou gen yon dokiman gwo, rantre nan eleman

64
00:04:11,000 --> 00:04:14,000
nan fason sa a ki pral yo dwe reyèlman ankonbran paske

65
00:04:14,000 --> 00:04:17,000
evantyèlman nou pral gen yo di bagay sa yo tankou document.body.childNodes

66
00:04:17,000 --> 00:04:21,000
yon bagay bracket. childNodes yon bagay bracket lòt moun,

67
00:04:21,000 --> 00:04:23,000
ak li pral jwenn vrèman ankonbran.

68
00:04:23,000 --> 00:04:27,000
Olye de sa ki sa nou reyèlman vle fè se kapab sijè rechèch dokiman an,

69
00:04:27,000 --> 00:04:30,000
Se konsa, jis renmen nou fouye pou bagay sa yo sou entènèt la lè l sèvi avèk mo kle

70
00:04:30,000 --> 00:04:33,000
nou reyèlman bezwen kèk fason pou chèche dokiman sa a suksen

71
00:04:33,000 --> 00:04:37,000
jwenn tounen sèlman eleman yo nou pran swen sou san yo pa Travelers

72
00:04:37,000 --> 00:04:39,000
tèt la pye bwa tout jouk anba.

73
00:04:39,000 --> 00:04:42,000
Chans, navigatè modèn pèmèt nou fè sa

74
00:04:42,000 --> 00:04:47,000
ak yon fonksyon espesyal ki rele querySelectorAll,

75
00:04:47,000 --> 00:04:49,000
ak fonksyon sa a pran yon agiman yon sèl

76
00:04:49,000 --> 00:04:53,000
ki se yon seleksyon CSS, epi li k ap pase pou li retounen nan nou

77
00:04:53,000 --> 00:04:56,000
tout nan eleman yo ki matche ak ki fè seleksyon yo.

78
00:04:56,000 --> 00:04:59,000
Sa vle di ou pa bezwen aprann yon antye sentaks nouvo pou rekèt Dom la.

79
00:04:59,000 --> 00:05:02,000
Olye de sa ou ka aplike konesans nan ou deja konnen

80
00:05:02,000 --> 00:05:04,000
sou CSS seleksyon.

81
00:05:04,000 --> 00:05:07,000
Ann pran yon gade nan kèk egzanp sou rekèt dokiman an.

82
00:05:07,000 --> 00:05:13,000
Si nou di querySelectorAll epi yo pase li sa a fil # foo

83
00:05:13,000 --> 00:05:18,000
ki nan pral bay nou tounen eleman an ak ID foo la.

84
00:05:18,000 --> 00:05:23,000
Ou kapab tou di document.getElementByID

85
00:05:23,000 --> 00:05:28,000
epi yo pase li foo nan fisèl san yo pa ki hashtag.

86
00:05:28,000 --> 00:05:31,000
W ap ale nan jwenn tounen menm objè a egzak.

87
00:05:31,000 --> 00:05:37,000
Si olye nou pase ba a fisèl. Document.querySelectorAll

88
00:05:37,000 --> 00:05:42,000
nou pral jwenn tounen tout nan eleman yo ak ba a nan klas la.

89
00:05:42,000 --> 00:05:45,000
Nou kapab tou konbine seleksyon CSS.

90
00:05:45,000 --> 00:05:51,000
Si nou pase nan fisèl # foo img la

91
00:05:51,000 --> 00:05:54,000
ki nan pral bay nou tounen tout nan eleman yo imaj

92
00:05:54,000 --> 00:05:58,000
ki se pitit eleman an ak ID foo la.

93
00:05:58,000 --> 00:06:03,000
Kòm ou ka wè, pa mete ansanm seleksyon nou gen kèk kapasite rechèch vrèman pwisan.

94
00:06:03,000 --> 00:06:06,000
Men, anba kapo a, Dom a se vrèman jis yon pye bwa,

95
00:06:06,000 --> 00:06:10,000
ak sa yo seleksyon pèmèt nou abstrè ki ale nan kèk degre

96
00:06:10,000 --> 00:06:14,000
paske nou pa toujou pran swen sou estrikti a tout antye nan pye bwa a Dom.

97
00:06:14,000 --> 00:06:18,000
Se te yon BECA rapid nan Dom la, ak mèsi pou rantre nan nou.

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