DOM上的節點分類 #
DOM 這顆樹上的每個點都被稱為是一個節點 (node) 而這個節點分為三種：
- HTML 元素節點 (element node)
- 文字節點 (text node)
- 註解節點 (comment node)
DOM提供兩種節點的集合：HTMLCollection 以及 NodeList.
-
HTMLCollection: 只包含 element node, 他是一個 活的集合（live collection），即 HTML 結構改變時它會即時更新
-
NodeList: 包含所有node，他是 static collection.
Document Object 常用方法 #
在了解 DOM 上的節點分類以後，我們便可以來了解 document object 上常用的方法，這將幫助我們操作元素。
| 方法 | 回傳類型 | 說明 |
|---|---|---|
document.getElementById(id) |
Element |
根據 id 選取第一個對應元素 |
document.getElementsByClassName(className) |
HTMLCollection |
取得所有符合 class 名稱的元素 |
document.getElementsByTagName(tag) |
HTMLCollection |
根據標籤名稱（如 div, p）選取元素 |
document.querySelector(selector) |
Element 或 null |
根據 CSS 選擇器，回傳第一個符合條件的元素 |
document.querySelectorAll(selector) |
NodeList |
根據 CSS 選擇器，回傳所有符合的元素 |
document.createElement(tagName) |
Element |
動態建立一個新元素節點，例如 createElement("button") |
document.createTextNode(text) |
Text |
建立一個文字節點，可與元素一起加入 |