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]