※ DOM是什麼？
DOM 全名為 Document Object Model 中文翻譯為 文件物件模型，就是把一份 HTML 文件內的各個標籤，包括文字、圖片等等都定義成物件，而這些物件最終會形成一個樹狀結構。
就 Document Object Model 這個名字來說，其中 document 指的是瀏覽器裡的 HTML 網頁，而 object model 示意如下圖：
- 瀏覽器載入 HTML 以後，會進一步把 HTML 的語法結構，解析成為上圖右的物件模型。
- 就屬性來說明：
- object model 和 HTML 文件的結構是一致的。
- 以 p 和 em 為例，在物件模型裡形成了父子階層關係。
- 任何在網頁裡出現的內容，無論看得到或看不到的，都會被解析成為 DOM 的一部分，包含註解。
- 當網頁變成了上圖右的物件模型以後，就可以用 JavaScript 來操作網頁元素。
- 簡單說「DOM 是瀏覽器開放給程式語言操作網頁元素的一種介面」。
※ 樹狀結構是什麼？
樹狀結構是資料結構的一種，特色是有明確的父子階層關係，也因為階層關係明確，按相對關係查找資料特別方便。因此DOM 採用樹狀結構 (tree) 來儲存網頁元素。
※ 樹狀結構內容
就節點在 DOM 樹中的角色和功能來說，樹狀裡每一個部分叫做「節點 (node)」，節點有四種類型：
- 元素節點 (element node)
- 文字節點 (text node)
- 屬性節點 (attribute node)
- 註解節點 (comment node)
※ 根節點：document是什麼？
在 DOM 的樹狀結構裡，根節點是 document，代表網頁的本身。
※結論：
- Document Object Model (DOM) 是一個 API，允許程序動態操作 HTML 和 XML 文檔的內容和結構。
- DOM是一種樹狀結構（Tree Structure）由多個節點（Node）組成。
- 從更廣泛的層面來描述，節點（Node）分成整個文檔(Document)、元素(Element)、屬性(Attribute)和文本內容(Text)四種組成。
