※ 認識DOM(一)

※ DOM是什麼？

DOM 全名為 Document Object Model 中文翻譯為 文件物件模型，就是把一份 HTML 文件內的各個標籤，包括文字、圖片等等都定義成物件，而這些物件最終會形成一個樹狀結構。

就 Document Object Model 這個名字來說，其中 document 指的是瀏覽器裡的 HTML 網頁，而 object model 示意如下圖：

說明：

• 瀏覽器載入 HTML 以後，會進一步把 HTML 的語法結構，解析成為上圖右的物件模型。
• 就屬性來說明：

1. object model 和 HTML 文件的結構是一致的。
2. 以 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)四種組成。