JavaScript DOM (Document Object Model)

DOM (Document Object Model) 定義了一組標準 API (Application Programming Interface) 讓我們可以用 JavaScript 對 HTML 文件做操作。

DOM 將一份 HTML 文件看作是一個樹狀結構的物件，讓我們可以方便直觀的存取樹中的節點 (node) 來改變其結構、樣式 (CSS) 或內容等：

圖片來自 Wikipedia DOM

HTML DOM 規範中定義了這些類型的 API：

• 讓我們可以對 HTML 的元素 (element) 當作是 JavaScript 物件 (object) 來操作
• 定義了 HTML 元素有哪些屬性 (properties) 可以來做存取
• 定義了 HTML 元素有哪些方法 (methods) 可以來被操作
• 定義了 HTML 元素事件 (events)，讓我們可以針對特定元素來綁定事件處理函式 (例如使用者按下滑鼠、在鍵盤打字都是所謂的事件)

DOM API 的使用範例

// 取得頁面上所有的 <p> 元素
var paragraphs = document.getElementsByTagName('p');

// 將所有的 <p> 元素的文字顏色都改成綠色
for (var i=0; i<paragraphs.length; ++i) {
    paragraphs[i].style.color = 'green';
}

更多 HTML DOM API 的使用方法，請看接下來章節的介紹：

• DOM 查找元素
• DOM 節點屬性
• DOM 節點操作
• DOM HTML 屬性
• DOM CSS
• DOM 事件處理