1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [DOM]

2
00:00:02,000 --> 00:00:04,000
[Томми Мак-Вильямс] [Гарвардский университет]

3
00:00:04,000 --> 00:00:07,000
[Это CS50.] [CS50.TV]

4
00:00:07,000 --> 00:00:10,000
В этом видео мы собираемся взглянуть на DOM.

5
00:00:10,000 --> 00:00:14,000
Когда браузер загружает веб-страницы, она должна быть представлена ​​в памяти как-то.

6
00:00:14,000 --> 00:00:17,000
Объектную модель документа DOM или,

7
00:00:17,000 --> 00:00:20,000
описывает, как браузер представляет собой веб-страницы в памяти.

8
00:00:20,000 --> 00:00:24,000
В этом видео мы посмотрим на DOM в контексте JavaScript,

9
00:00:24,000 --> 00:00:26,000
DOM, но является независимым от языка понятие.

10
00:00:26,000 --> 00:00:30,000
Например, PHP имеет свою собственную реализацию DOM, а также.

11
00:00:30,000 --> 00:00:32,000
Тем не менее, DOM часто используются JavaScript

12
00:00:32,000 --> 00:00:36,000
Так как JavaScript позволяет нам изменять содержимое веб-страницы на лету,

13
00:00:36,000 --> 00:00:39,000
DOM и позволяет нам получить доступ к части веб-страниц.

14
00:00:39,000 --> 00:00:43,000
Давайте посмотрим на примере веб-страницы.

15
00:00:43,000 --> 00:00:48,000
Хорошо, теперь давайте посмотрим, как эта страница будет представлена ​​в DOM.

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

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
элемента h1 и ул элемента.

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
И это вернет нам массив, содержащий оба элемента h1

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
Мы также можем получить ее тэг который в этом случае будет

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
вернуться только те элементы, мы заботимся о без пересечения

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
Это означает, что вам не нужно учиться совершенно новый синтаксис для запросов DOM.

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
что происходит, чтобы вернуть нам элемент с ID Foo.

84
00:05:18,000 --> 00:05:23,000
Можно также сказать, document.getElementById

85
00:05:23,000 --> 00:05:28,000
и передать его строка Foo без этого хэштег.

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
, которые являются потомками элемента с ID Foo.

93
00:05:58,000 --> 00:06:03,000
Как вы можете видеть, путем объединения селекторов у нас есть некоторые очень мощные возможности поиска.

94
00:06:03,000 --> 00:06:06,000
Но под капотом, DOM на самом деле просто дерево,

95
00:06:06,000 --> 00:06:10,000
и эти селекторы позволяют нам, что от абстрактных до некоторой степени

96
00:06:10,000 --> 00:06:14,000
потому что мы не всегда заботимся о всей структуре дерева DOM.

97
00:06:14,000 --> 00:06:18,000
Это был краткий обзор того, DOM, и спасибо за присоединение к нам.

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