1.回顧

在說JavaScript之前，我們先來回顧一下JavaScript ，html，css的區別。 html：用來顯示內容。 css：用來設定頁面顯示內容的樣式，比如顏色等。 JavaScript：用來觸發頁面上的各種事件，比如，點選按鈕事件，圖片自動切換事件等。 　　那麼，JavaScript是如何控制這些事件呢，主要就是靠DOM和BOM。下面我們來了解一下什麼是BOM和DOM。 我們都知道javas主要分為三個部分，如下圖。 　　 ECMAScript標準：js的基本語法。這個對於頁面的操作沒有任何的做用。 DOM：document object model——》文件物件模型——用來操作頁面的元素。 BOM：browser object model ——》瀏覽器物件模型——用來操作瀏覽器物件。

瞭解了這些，那我們接下來就看看什麼是DOM吧。

２.簡介：

DOM 是文件物件模型，我們先來了解一下什麼是文件。個人感覺直接看官方的簡介非常的難懂，應該是我對水平有待提高吧。

２.１文件：

一個html頁面檔案就是一個文件，由於萬物都是物件。所以把這個文件頁看做物件。 另外，xml檔案也是一個檔案。 　　xml與html檔案的區別： 　　　xml中元素可以自定義。側重於資料儲存。 　　　html中元素有系統提供。側重於內容顯示。

2．2理解：html 檔案和標籤、節點的關係？

• Html 檔案看成一個物件，那麼這個文件就可以看成一個物件，文件中的每一個的標籤也可以看成一個物件。
• 頁面中的每個標籤，都是一個元素（element），每個元素都可以看成一個物件。
• 標籤可以巢狀，標籤中有標籤，元素中有元素。
• 頁面中所有的標籤都是元素，元素也可以看成物件。
• 節點（node）：頁面中所有的內容都是節點。包括：標籤，屬性，文件。

2．３總結：

為此，我就可以理解為DOM就是人家定義好的一種操作html文件中各個物件的標準，只要按照這個標準，咱們就可以在html文件中為所欲為了。

3樹狀圖：

文件以及文件中的所以的元素（標籤）組成的一個樹形結構圖，叫做樹狀圖。 正如下圖所示，這就是DOM的樹狀圖。那麼這個圖為什麼這麼畫呢。

大家都知道，我們新建一個html文件，結構如下圖。 html頁面都有一個跟標籤—— 也可以叫做根元素。 頁面中有一個根元素（也叫標籤——html），根元素裡面有很多的元素。

那麼根元素中包括了和標籤。 另外，這個兩個標籤中又可以包含如下的標籤。