1
00:00:00,600 --> 00:00:03,770
到目前為止，我們已經談到為何獨領風騷的稱謂是令人興奮的。

2
00:00:03,960 --> 00:00:05,100
為什麼你應該關心。

3
00:00:05,100 --> 00:00:09,420
使用它的無限可能的遊戲所有的令人興奮的事情在不同的地點。

4
00:00:09,570 --> 00:00:12,710
但是，我們還沒有真正談過什麼DOM實際上是。

5
00:00:12,810 --> 00:00:16,380
所以，我們要做的，在這段錄像開始就讓我們定義它。

6
00:00:16,380 --> 00:00:17,180
迪歐上午。

7
00:00:17,220 --> 00:00:20,040
DOM代表文檔對象模型。

8
00:00:20,190 --> 00:00:24,100
這三個字的意義將在未來的幻燈片更有意義。

9
00:00:24,100 --> 00:00:26,780
但是，讓我們通過在更高層次上定義它開始。

10
00:00:26,820 --> 00:00:30,560
DOM是你的JavaScript和你的年齡之間的接口。

11
00:00:30,570 --> 00:00:48,930
蒂姆的Mounty SS它基本上是一幫特殊的JavaScript對象JavaScript方法的功能，我們可以用它來與我們H.M.S.交互評估我們可以改變的事情，我們可以添加元素刪除元素改變顏色動畫東西種種令人振奮的方式與他們互動H.M.S.評估。

12
00:00:49,380 --> 00:00:56,070
在這張幻燈片上，我來談一下DOM是如何構造的一點點，為什麼它被稱為文檔對象模型。

13
00:00:56,070 --> 00:01:09,950
所以，當我們加載了一個電子郵件頁面看起來像這樣在瀏覽器中，它只是一些簡單的一柄他，所以你有一個標題和我的文字鏈接標籤和H-1與我的頭作為文本，這就是它。

14
00:01:10,260 --> 00:01:16,360
所以，當我在我看到這個瀏覽器，但DOM創建幕後打開此了。

15
00:01:16,380 --> 00:01:19,190
它是從這個構造就在這裡。

16
00:01:19,320 --> 00:01:24,270
所以，我的意思是，這個年齡段的蒂姆變成了一堆的JavaScript對象。

17
00:01:24,270 --> 00:01:27,440
每個對象模型，這些元件中的一個。

18
00:01:27,450 --> 00:01:31,340
這就是我們得到文檔對象模型的對象模型的一部分。

19
00:01:31,650 --> 00:01:38,060
所以，再一次只是重申我們每個團隊加載在瀏覽器中顯示的東西給我們這樣的瀏覽器。

20
00:01:38,220 --> 00:01:47,490
但在幕後，它實際上使每一個元素的這個模型就像我們使用的是JavaScript對象建模我的狗生鏽的JavaScript對象。

21
00:01:47,490 --> 00:01:50,770
他有一個屬性名稱和其他一個品種和年齡。

22
00:01:50,850 --> 00:01:55,080
這些對象是從根本上除了內容一樣的東西是不同的。

23
00:01:55,110 --> 00:02:07,290
他們將有事情喜歡的類型的標記文字來源屬性顏色背景顏色文字大小，它們都包含在每個對象內部的所有不同的特性。

24
00:02:07,290 --> 00:02:11,620
我們肯定會花費大量的時間與這些對象工作，所以具體細節並不重要。

25
00:02:11,640 --> 00:02:14,970
所有這一切我想在這裡強調的是，我們加載各添升。

26
00:02:15,120 --> 00:02:22,610
它顯示在瀏覽器和瀏覽器需要蒂姆·L和需要每個元素並把它變成一個對象。

27
00:02:22,680 --> 00:02:24,510
以便覆蓋所述對象模型的一部分。

28
00:02:24,540 --> 00:02:25,860
怎麼樣的文檔。

29
00:02:26,070 --> 00:02:38,930
所以，你可以在這裡看到，這是結構我們從DOM得到一切都包含在我們的H.T.的整個模型內的頂級對象類型的小圖mounseers我們稱為文檔。

30
00:02:39,120 --> 00:02:41,200
因此，我們可以去任何網頁都沒有。

31
00:02:41,220 --> 00:02:45,190
所以，我有谷歌開放的，我只是要鍵入CON。 Word文檔。

32
00:02:45,390 --> 00:02:49,470
當我這樣做，我得到回來這個大目標這個大事情。

33
00:02:49,470 --> 00:02:51,900
但它看起來並不像一個JavaScript對象。

34
00:02:51,900 --> 00:02:53,740
這不是真的是我們所期望的。

35
00:02:53,760 --> 00:02:56,030
這是因為瀏覽器是一種從我隱藏它。

36
00:02:56,130 --> 00:03:04,480
它實際上是什麼顯示我與總部的郵件看起來像文本，但它不顯示我正在對這個蒂莫模擬實際的對象。

37
00:03:04,740 --> 00:03:19,990
因此，為了得到我們需要使用取消點D I R，它是控制台對象的另一種方法，我們要取消該D.I.R.所有的文件，這將做的是打印出這個對象語法，我們是熟悉整個文檔對象。

38
00:03:20,070 --> 00:03:30,220
所以你可以看到它只是一個普通的對象，就像我們已經寫我們自己只是除了這裡有一個更多的信息一樣生鏽的狗對象的人。

39
00:03:30,510 --> 00:03:41,040
因此，我們有東西像字體或圖像的聯繫，但我們也有類似的事情的身體和這身代表著整個身體。

40
00:03:41,040 --> 00:03:44,320
所以每次你在這裡看到的元素是身體內部。

41
00:03:44,340 --> 00:03:51,050
所以，如果我打開身體向上，你會看到我們有一大堆其他屬性，包括一個叫孩子的節點。

42
00:03:51,150 --> 00:03:58,590
因此，子節點告訴我們，有一個div有一個腳本標記，並有身體內另一個div。

43
00:03:58,590 --> 00:04:00,710
如果我們去了我們的元素會看到這一點。

44
00:04:00,710 --> 00:04:03,360
因此，這裡的身體的身體裡面。

45
00:04:03,420 --> 00:04:07,990
我們有第一個div我們有一個腳本標記，我們有第二個div。

46
00:04:08,430 --> 00:04:15,890
然後呢說，我們開闢了第三個格，我們希望看到裡面的兩個div的如果第二個div。

47
00:04:15,900 --> 00:04:28,360
如果我們去到的領事，我們來看看第二個div，然後我們來看看子節點，我們看到確定有兩個div的所以你可以看到DOM變得非常龐大的真快。

48
00:04:28,500 --> 00:04:34,730
有成百上千的不同的屬性和方法，不同的節點和嵌套對象的這整個瘋狂的結構。

49
00:04:34,890 --> 00:04:36,250
這只是這麼多的東西。

50
00:04:36,270 --> 00:04:42,060
這是我在這個類在這裡你將不得不舒適不知道一切的開始提到的時期之一。

51
00:04:42,420 --> 00:04:46,450
我現在可以告訴你，大多數開發人員不知道一半的財產在這裡。

52
00:04:46,500 --> 00:04:49,200
我說，他們最多有大約10％的工作。

53
00:04:49,200 --> 00:04:52,630
這裡有這麼多東西，我們幾乎從來沒有需要使用。

54
00:04:52,680 --> 00:04:57,280
然後，有時下了線的東西來了，我們必須做一些事，我們從來沒有做過的事情。

55
00:04:57,330 --> 00:05:03,690
我們google一下，我們發現哦好吧，這樣的未固化的變化特性是什麼。

56
00:05:03,750 --> 00:05:04,560
我不知道。

57
00:05:04,680 --> 00:05:06,500
這真的是什麼感覺是一個開發者。

58
00:05:06,510 --> 00:05:14,380
到現在為止，使用JavaScript，我們已經在一個小控制的世界裡，我們了解我們了解變量的函數和對象的一點點在努力。

59
00:05:14,610 --> 00:05:21,440
而且還有的做事方式是有限的和有知識的一個非常具體的子集，你只需要知道與DOM。

60
00:05:21,450 --> 00:05:25,500
現在我們有這個巨大的生態系統巨大的工作在這麼多的屬性。

61
00:05:25,620 --> 00:05:28,020
所以，我只是想重申有這麼多在這裡。

62
00:05:28,170 --> 00:05:32,100
我們將重點放在重要的部分，但目標不是背誦。

63
00:05:32,130 --> 00:05:34,780
我們的目標不是要掌握每一個屬性。

64
00:05:34,920 --> 00:05:39,560
同樣10％的頂多是所有你需要一個稱職的Web開發人員。

65
00:05:40,000 --> 00:05:43,080
好讓我們回去，我只想過這一次。

66
00:05:43,080 --> 00:05:44,450
總結一下我們談過。

67
00:05:44,700 --> 00:05:48,030
所以在DOM代表文檔對象模型。

68
00:05:48,150 --> 00:05:52,150
這是你的JavaScript和你H.M.S之間的接口..

69
00:05:52,280 --> 00:05:55,180
這是我們如何利用我們的JavaScript，使事情互動。

70
00:05:55,260 --> 00:06:19,110
這是我們如何做的事情一樣添加新元素到頁面或更改鏈接的ref屬性或更改對我們身體的背景圖像或我們如何能獲得價值一張表格，或者我們可以做定制驗證和動畫和互動在這裡你的一些代碼點擊元素運行所有這些不同的可能性都基於這樣的事實，該文檔對象模型與HMS連接我們的JavaScript訪問。

71
00:06:19,260 --> 00:06:27,470
因此，文檔對象模型，對象模型的部分告訴我們，它是正在建模在我們的H.T.元素JavaScript對象一堆量。

72
00:06:27,870 --> 00:06:32,980
因此，我們有一個ATAC在這裡，我們結束了在這裡的對象表示該ATEC。

73
00:06:33,180 --> 00:06:37,770
然後，我們最終代表該H1標籤，我們看到在這裡的另一個對象。

74
00:06:37,980 --> 00:06:43,740
最後，因為一切都住稱為文檔的一個對象的內部，它被稱為文檔對象模型。

75
00:06:43,830 --> 00:06:46,850
它的，其中一切住內部的根節點。

76
00:06:47,070 --> 00:06:49,030
所以接下來的視頻中，我們要開始編寫一些代碼。