# 樹狀結構與 DOM 節點

###### tags: `javascript`,`DOM`

## DOM：文件物件模型

### ==文件 & 物件模型==
**DOM 的全名為文件物件模型 (Document Object Model)**， DOM 規格由這兩個組織：W3C 和 WhatWG 共同制定，並由 WhatWG 統一發布 DOM Living Standard。各家瀏覽器廠商再依照規格實作出 DOM，並提供相關的 JavaScript 操作語法。

Document Object Model 其中 document 指的是瀏覽器裡的 HTML 網頁，而 object model 示意如下圖：

瀏覽器載入 HTML 以後，會進一步把 HTML 的語法結構，解析成為上圖右的物件模型，在這個示意圖中我們挑選其中幾個屬性來舉例：

* object model 和 HTML 文件的結構是一致的
* 以 p 和 em 為例，在物件模型裡形成了父子階層關係

任何在網頁裡出現的內容，無論看得到或看不到的，都會被解析成為 DOM 的一部分，包含註解。

**DOM 是瀏覽器開放給程式語言操作網頁元素的一種介面！**

## ==樹狀結構：DOM Tree==
DOM 採用**樹狀結構 (tree) 來儲存網頁元素，樹狀結構是資料結構的一種，特色是有明確的父子階層關係，也因為階層關係明確**，按相對關係查找資料特別方便。
樹狀裡每一個部分叫做「節點 (node)」，節點有四種類型：

* **元素節點 (element node)**
* **文字節點 (text node)**
* 屬性節點 (attribute node)
* 註解節點 (comment node)

# ==根節點：document==
**在 DOM 的樹狀結構裡，根節點是 document，代表網頁的本身。**

打開一個網頁，然後在 console 裡輸入 document。按下 enter 後會回傳 #document，這是一個元素節點，將其展開之後你會發現裡面是所有的 HTML 文件內容：
你在 DevTool 的 Elements 面板裡看到的內容就是 DOM 的結構，**他不是你的 HTML 文件，而是 DOM 操作的結果，如果你使用 JavaScript 改變 DOM 的狀態，瀏覽器顯示在 Elements 會同步更新。**
所有操作語法都繼承自 document 這個物件，你可以直接透過 DevTools 來查看document 物件的屬性與方法。

## ==瀏覽器也是物件模型==
最後要提醒你 window 的存在，在 document 物件模型的上層還有 **window，也就是 「瀏覽器物件模型 (Browser Object Model)」，簡稱為 BOM。**

==BOM 的根節點是 window，也就是視窗==
window 之下還有其他的子物件包括 screen、navigator、location、history、frames、document。剛才提到的 document 是其中一部分。

### ==根節點：window==
這次請你在 console 裡輸入 window，這次跑出來的內容不太一樣，看起來是一個物件，展開之後有一堆屬性和方法：
* window.alert 「彈出視窗」：

這裡特別提到 window，是因為有時候會不小心把 this 指向 window 物件，所以要特別認識一下，不然會被嚇到。

window 是一個全域物件 (global object)，它不會受到 local scope 的限制。全域物件是可以省略不寫的，例如

`window.alert() 等於 alert()`
`window.document 等於 document`

### 小結
現在你認識了 DOM，接下來我們要進一步學習如何用 JavaScript 來操作 DOM 元素 (DOM manipulation) ，基本步驟是：

1. 利用 HTML 裡的 id 或 class 等結構，選出一個特定元素
1. 按相對關係，從樹狀結構裡找出目標節點
1. 最後，修改這個目標節點