什麼是 HTML DOM？
HTML DOM 是 HTML 的一個物件模型。它定義了
- HTML 元素是物件
- 所有 HTML 元素的屬性
- 所有 HTML 元素的方法
- 所有 HTML 元素的事件
HTML DOM 是 JavaScript 的一個API（程式設計介面）
- JavaScript 可以新增/更改/移除 HTML 元素
- JavaScript 可以新增/更改/移除 HTML 屬性
- JavaScript 可以新增/更改/移除 CSS 樣式
- JavaScript 可以響應 HTML 事件
- JavaScript 可以新增/更改/移除 HTML 事件
HTML DOM (文件物件模型)
當一個網頁載入時，瀏覽器會建立一個頁面的文檔對象模型 (DOM)。
HTML DOM 模型構建為一個物件樹
HTML DOM 物件樹
查詢 HTML 元素
當您想使用 JavaScript 訪問 HTML 元素時，您必須先找到這些元素。
有幾種方法可以做到這一點
- 按 ID 查詢 HTML 元素
- 按標籤名查詢 HTML 元素
- 按類名查詢 HTML 元素
- 按 CSS 選擇器查詢 HTML 元素
- 按 HTML 物件集合查詢
按 Id 查詢 HTML 元素
在 DOM 中查詢 HTML 元素的 easiest 方法是使用元素的 ID。
此示例查詢 ID 為 "intro" 的元素
如果找到該元素，該方法將返回該元素作為物件（在 myElement 中）。
如果未找到該元素，myElement 將包含 null。
按標籤名查詢 HTML 元素
此示例查詢所有 <p> 元素
此示例查詢 ID 為 "main" 的元素，然後查詢 "main" 中所有的 <p> 元素
按類名查詢 HTML 元素
如果您想查詢所有具有相同類名的 HTML 元素，請使用 getElementsByClassName()。
此示例返回所有類名為 "intro" 的元素的列表。
在 Internet Explorer 8 及更早版本中，按類名查詢不起作用。
按 CSS 選擇器查詢 HTML 元素
如果您想查詢所有與指定 CSS 選擇器（ID、類名、型別、屬性、屬性值等）匹配的 HTML 元素，請使用 querySelectorAll() 方法。
此示例返回所有類名為 "intro" 的 <p> 元素的列表。
querySelectorAll() 方法在 Internet Explorer 8 及更早版本中不起作用。
透過 HTML 物件集合查詢 HTML 元素
HTML 物件集合也同樣可以訪問
HTML DOM 教程
完整 HTML DOM 教程
這是一個簡短的 HTML DOM 入門介紹。
如需完整的 HTML DOM 教程，請訪問 W3Schools HTML DOM 教程。
