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

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

3
00:00:04,000 --> 00:00:07,000
[Ова е CS50.] [CS50.TV]

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
На документ Object Model, или ДОМ,

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

8
00:00:20,000 --> 00:00:24,000
Во ова видео, ние ќе ги разгледаме во ДОМ во контекст на JavaScript,

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

10
00:00:26,000 --> 00:00:30,000
На пример, PHP има свој ДОМ имплементација, како и.

11
00:00:30,000 --> 00:00:32,000
Сепак, ДОМ често се користат од страна на вклучите Javascript-

12
00:00:32,000 --> 00:00:36,000
бидејќи го вклучите Javascript-ни овозможува да ја смени содржината на веб страница во лет,

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
И секое дрво треба да имате root јазол на врвот.

17
00:00:51,000 --> 00:00:54,000
За овој документ, елементот HTML е коренот јазол

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
Ајде да ги разгледаме во документот HTML повторно.

21
00:01:03,000 --> 00:01:09,000
Забележите дека телото таг е вгнездена во внатрешноста на HTML таг.

22
00:01:09,000 --> 00:01:14,000
Ова значи дека телото елемент е дете на HTML елемент.

23
00:01:14,000 --> 00:01:17,000
Ние може да претставува ова во нашата DOM-стебло со тоа што телото на лист

24
00:01:17,000 --> 00:01:20,000
слегува од HTML.

25
00:01:20,000 --> 00:01:22,000
Ајде да го направиме тоа.

26
00:01:22,000 --> 00:01:24,000
Имаме тело под HTML.

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
Имаме H1 и на ул.

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

33
00:01:43,000 --> 00:01:50,000
и ова ќе заврши нашата DOM-стебло, па ајде да додадете Ли, Ли, Ли.

34
00:01:50,000 --> 00:01:56,000
Со ова завршува нашата DOM-стебло, и ова е начинот на кој пребарувач е чување на вашата веб страница.

35
00:01:56,000 --> 00:02:02,000
Сега ајде да ги разгледаме во тоа како ние може да напречни ова дрво користејќи JavaScript.

36
00:02:02,000 --> 00:02:10,000
Ние може да пристапите на оваа дрво со помош на специјален го вклучите Javascript-променлива наречена документ.

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
кој ако се запамети е дека H1 таг и ул ознака,

42
00:02:26,000 --> 00:02:37,000
можеме да кажеме document.body.childNodes.

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
можеме да кажеме vrr ул = потоа овој код овде,

47
00:02:57,000 --> 00:03:00,000
и сега, бидејќи childNodes е едноставно низа

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
Ако се каже ul.id тоа ќе биде еднаква на низа листа

51
00:03:17,000 --> 00:03:20,000
затоа што тоа е она што го имаме во нашата HTML страница.

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

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
Ако се каже. ParentNode, тоа ќе биде иста како document.body.

57
00:03:43,000 --> 00:03:46,000
Се разбира, ова ул има деца на сопствената,

58
00:03:46,000 --> 00:03:50,000
па ние се уште може да се каже. childNodes на овој елемент,

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

60
00:03:55,000 --> 00:04:02,000
Конечно, можеби повеќето корисни имотот е и ќе биде. InnerHTML,

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

62
00:04:06,000 --> 00:04:08,000
беа оние 3 li тагови.

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
на крајот ние ќе мора да кажам нешто како document.body.childNodes

66
00:04:17,000 --> 00:04:21,000
заградата нешто. childNodes заградата нешто друго,

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
се вратат само елементите ние се грижиме за без traversing

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
со посебна функција наречена querySelectorAll,

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

76
00:04:49,000 --> 00:04:53,000
дека е CSS селектор, и тоа се случува да се вратат да ни

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
за CSS селектори.

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

82
00:05:07,000 --> 00:05:13,000
Ако се каже querySelectorAll и го помине овој стринг # foo

83
00:05:13,000 --> 00:05:18,000
тоа ќе ни даде назад на елементот со проект foo.

84
00:05:18,000 --> 00:05:23,000
Можете исто така да се каже document.getElementByID

85
00:05:23,000 --> 00:05:28,000
и тоа го положат низа foo без тоа hashtag.

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

87
00:05:31,000 --> 00:05:37,000
Ако наместо тоа, ние го положат низа. Бар да document.querySelectorAll

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

89
00:05:42,000 --> 00:05:45,000
Ние, исто така, може да се комбинираат CSS селектори.

90
00:05:45,000 --> 00:05:51,000
Ако ние помине во низа # foo img

91
00:05:51,000 --> 00:05:54,000
што се случува да ни даде вратам сите на сликата елементи

92
00:05:54,000 --> 00:05:58,000
дека сме деца на елементот со проект foo.

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