1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [ДОМ]

2
00:00:02,000 --> 00:00:04,000
[Томми МацВиллиамс] [Универзитет Харвард]

3
00:00:04,000 --> 00:00:07,000
[Ово је ЦС50.] [ЦС50.ТВ]

4
00:00:07,000 --> 00:00:10,000
У овом видеу ћемо да погледамо ДОМ.

5
00:00:10,000 --> 00:00:14,000
Када прегледач преузима веб странице, потребно је да буду заступљени у меморији некако.

6
00:00:14,000 --> 00:00:17,000
Доцумент Објецт Модел, или ДОМ,

7
00:00:17,000 --> 00:00:20,000
описује како је претраживач представља страну у меморији.

8
00:00:20,000 --> 00:00:24,000
У овом видеу, ми ћемо да погледамо у ДОМ-у контексту ЈаваСцрипт,

9
00:00:24,000 --> 00:00:26,000
ДОМ али је језик независан концепт.

10
00:00:26,000 --> 00:00:30,000
На пример, ПХП има своју примену и ДОМ.

11
00:00:30,000 --> 00:00:32,000
Међутим, Дом се често користи од стране ЈаваСцрипт

12
00:00:32,000 --> 00:00:36,000
јер ЈаваСкрипт нам омогућава да промените садржај веб странице у лету,

13
00:00:36,000 --> 00:00:39,000
ДОМ и омогућава нам да приступе деловима веб странице.

14
00:00:39,000 --> 00:00:43,000
Хајде да погледамо један пример веб странице.

15
00:00:43,000 --> 00:00:48,000
Ок, сад да видимо како ће ова страница бити представљени у Дому.

16
00:00:48,000 --> 00:00:51,000
И свако дрво мора да има роот чвор на врху.

17
00:00:51,000 --> 00:00:54,000
У овом документу, ХТМЛ елемент је корен чвор

18
00:00:54,000 --> 00:00:56,000
јер је то први елемент који се појављује.

19
00:00:56,000 --> 00:01:00,000
Хајде да додамо чвор роот нашем дрво.

20
00:01:00,000 --> 00:01:03,000
Хајде да поново погледамо ХТМЛ документа.

21
00:01:03,000 --> 00:01:09,000
Обратите пажњу да је тело ознака је угнеждена унутар ХТМЛ ознаке.

22
00:01:09,000 --> 00:01:14,000
То значи да је тело елемент је дете ХТМЛ елемента.

23
00:01:14,000 --> 00:01:17,000
Ми то може да представља у нашој ДОМ стабло тело за доношење лист

24
00:01:17,000 --> 00:01:20,000
силазно из ХТМЛ.

25
00:01:20,000 --> 00:01:22,000
Хајде да то урадимо.

26
00:01:22,000 --> 00:01:24,000
Имамо тело испод ХТМЛ.

27
00:01:24,000 --> 00:01:28,000
Сада можемо видети да тело има 2 деце своје,

28
00:01:28,000 --> 00:01:31,000
Х1 елемент и елемент Ул.

29
00:01:31,000 --> 00:01:34,000
То значи да можемо повезати оба та елемента

30
00:01:34,000 --> 00:01:36,000
на боди елемента, па хајде да то уради.

31
00:01:36,000 --> 00:01:40,000
Имамо х1 и Ул.

32
00:01:40,000 --> 00:01:43,000
Коначно, ул 'елемент има 3 више деце,

33
00:01:43,000 --> 00:01:50,000
и то ће завршити наш ДОМ стабло, па хајде да додају ли, ли, ли.

34
00:01:50,000 --> 00:01:56,000
Ово употпуњује нашу ДОМ стаблу, а то је начин на који прегледач је чување своју веб страницу.

35
00:01:56,000 --> 00:02:02,000
Хајде сада да погледамо како можемо прећи ово дрво помоћу ЈаваСцрипт.

36
00:02:02,000 --> 00:02:10,000
Можемо приступити ово дрво користећи специјалну ЈаваСцрипт променљиву зове документ.

37
00:02:10,000 --> 00:02:13,000
Један имовина тог документа објекта

38
00:02:13,000 --> 00:02:16,000
је тело имовина, а овај објекат представља

39
00:02:16,000 --> 00:02:19,000
тело елемент у нашем примеру сајту.

40
00:02:19,000 --> 00:02:23,000
Ако бисмо хтели да се сва деца из тела елемента,

41
00:02:23,000 --> 00:02:26,000
који ако се сећате да је Х1 ознака и ознака Ул,

42
00:02:26,000 --> 00:02:37,000
можемо рећи доцумент.боди.цхилдНодес.

43
00:02:37,000 --> 00:02:41,000
И то ће нам вратити низ који садржи обе х1 елемент

44
00:02:41,000 --> 00:02:46,000
и ул 'елемент, јер су они и директни деца тела.

45
00:02:46,000 --> 00:02:50,000
Ако је желео да створи променљиву која представља ул елемент

46
00:02:50,000 --> 00:02:57,000
можемо рећи врр ул = онда то код овде,

47
00:02:57,000 --> 00:03:00,000
и сада зато цхилдНодес је само скуп

48
00:03:00,000 --> 00:03:07,000
можемо индекс у њу са [1] да се други елемент тог низа.

49
00:03:07,000 --> 00:03:13,000
Са овом новом објекту ул можемо приступити различитим својства елемента попут његовог ИД.

50
00:03:13,000 --> 00:03:17,000
Ако кажемо ул.ид да ће бити једнака стринг листу

51
00:03:17,000 --> 00:03:20,000
јер то је оно што ми имамо у нашем ХТМЛ страницу.

52
00:03:20,000 --> 00:03:24,000
Такође, можете добити своју тагНаме, који у овом случају ће бити

53
00:03:24,000 --> 00:03:32,000
Који тип елемента је, у овом случају, ул.

54
00:03:32,000 --> 00:03:36,000
Такође можемо добити свој родитељ или чвора изнад њега, који у овом случају

55
00:03:36,000 --> 00:03:38,000
ће бити тело елемент.

56
00:03:38,000 --> 00:03:43,000
Ако кажемо парентНоде, који ће бити исти као доцумент.боди..

57
00:03:43,000 --> 00:03:46,000
Наравно, ова ул има деце своје,

58
00:03:46,000 --> 00:03:50,000
тако да и даље можемо рећи цхилдНодес на овом елементу.,

59
00:03:50,000 --> 00:03:55,000
Овај низ и сада би требало да има дужину 3 јер постоје 3 комада у нашој листи.

60
00:03:55,000 --> 00:04:02,000
Коначно, можда најкориснији имовина ће бити иннерХТМЛ,.

61
00:04:02,000 --> 00:04:06,000
и то ће бити стварни садржај листе, која у нашем примеру странице

62
00:04:06,000 --> 00:04:08,000
су ти 3 Ли ознаке.

63
00:04:08,000 --> 00:04:11,000
Наравно, ако имамо велики документ, приступ елементима

64
00:04:11,000 --> 00:04:14,000
на овај начин ће бити веома тежак, јер

65
00:04:14,000 --> 00:04:17,000
на крају ћемо морати да говориш такве ствари доцумент.боди.цхилдНодес

66
00:04:17,000 --> 00:04:21,000
носач нешто. цхилдНодес носач нешто друго,

67
00:04:21,000 --> 00:04:23,000
и то ће се заиста гломазан.

68
00:04:23,000 --> 00:04:27,000
Уместо тога, оно што заиста желимо да урадимо је бити у могућности да тражите документ,

69
00:04:27,000 --> 00:04:30,000
Тако да као и тражили смо ствари на интернету помоћу кључних речи

70
00:04:30,000 --> 00:04:33,000
ми стварно треба неки начин тражи да се овај документ језгровито

71
00:04:33,000 --> 00:04:37,000
врати само елементи нам је стало, без попречно

72
00:04:37,000 --> 00:04:39,000
целог стабла од врха до дна.

73
00:04:39,000 --> 00:04:42,000
Срећом, модерни претраживачи омогућавају нам да се то уради

74
00:04:42,000 --> 00:04:47,000
са посебном функцијом зове куериСелецторАлл,

75
00:04:47,000 --> 00:04:49,000
и ова функција узима један аргумент

76
00:04:49,000 --> 00:04:53,000
да је ЦСС селектор, а то ће нам се вратити

77
00:04:53,000 --> 00:04:56,000
све елементе који одговарају тај бирач.

78
00:04:56,000 --> 00:04:59,000
То значи да не морате да научите потпуно нови синтаксу за упит ДОМ.

79
00:04:59,000 --> 00:05:02,000
Уместо тога можете да примените знање већ знате

80
00:05:02,000 --> 00:05:04,000
о ЦСС селектора.

81
00:05:04,000 --> 00:05:07,000
Хајде да погледамо неке примере упита документ.

82
00:05:07,000 --> 00:05:13,000
Ако кажемо куериСелецторАлл и проследите овај стринг # фоо

83
00:05:13,000 --> 00:05:18,000
који ће нам вратити елемент са ИД ФОО.

84
00:05:18,000 --> 00:05:23,000
Такође можете рећи доцумент.гетЕлементБиИд

85
00:05:23,000 --> 00:05:28,000
и њега прође ниске ФОО без тог хасхтаг.

86
00:05:28,000 --> 00:05:31,000
Идеш да се врати исту тачан објекат.

87
00:05:31,000 --> 00:05:37,000
Ако уместо тога прођемо ниску. Бара до доцумент.куериСелецторАлл

88
00:05:37,000 --> 00:05:42,000
ћемо да се вратимо све елементе са класе траци.

89
00:05:42,000 --> 00:05:45,000
Такође можете комбиновати ЦСС селектора.

90
00:05:45,000 --> 00:05:51,000
Ако прође у стринг # фоо имг

91
00:05:51,000 --> 00:05:54,000
који ће нас вратити све слике елемената

92
00:05:54,000 --> 00:05:58,000
да су деца елемент са ИД ФОО.

93
00:05:58,000 --> 00:06:03,000
Као што можете да видите, комбиновањем селектора имамо неке веома моћне могућности претраге.

94
00:06:03,000 --> 00:06:06,000
Али, испод хаубе, ДОМ је заиста само дрво,

95
00:06:06,000 --> 00:06:10,000
и ови селектори омогућавају нам да апстрактна далеко да у извесној мери

96
00:06:10,000 --> 00:06:14,000
јер ми не увек брига за целу структуру ДОМ стабла.

97
00:06:14,000 --> 00:06:18,000
То је био кратак преглед ДОМ, и хвала што сте нам се придружили.

98
00:06:18,000 --> 00:06:20,000
[ЦС50.ТВ]