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

2
00:00:02,000 --> 00:00:04,000
[Tommy瑪克威廉的] [哈佛大學]

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
然而，經常用來通過JavaScript DOM

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
這意味著，body元素是一個孩子的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元素和ul元素。

29
00:01:31,000 --> 00:01:34,000
這意味著我們可以將這些元素都

30
00:01:34,000 --> 00:01:36,000
到body元素，讓我們做到這一點。

31
00:01:36,000 --> 00:01:40,000
我們有一個h1和UL。

32
00:01:40,000 --> 00:01:43,000
最後，ul元素有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標籤和UL標籤，

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
ul元素，因為他們是直接的孩子的身體。

45
00:02:46,000 --> 00:02:50,000
如果我們想創建一個變量代表ul元素

46
00:02:50,000 --> 00:02:57,000
我們可以說VRR UL =那麼這段代碼在這裡，

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
有了這個新的UL對象，我們就可以訪問不同的元素屬性，如它的ID。

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
所以我們仍然可以說這個元素的子節點，

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華里標籤。

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
支架的東西。子節點支架別的東西，

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，並通過這串＃富

83
00:05:13,000 --> 00:05:18,000
那將會給我們的元素的ID富。

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
兒童的元素的ID富。

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]