Suki Wong

JavaScript DOM（文件物件模型）

簡介

DOM（Document Object Model，文件物件模型）是瀏覽器用來表示 HTML 或 XML 文件的結構化介面。透過 DOM，JavaScript 可以存取、操作及修改網頁內容與結構。DOM 將整個網頁視為一棵樹狀結構，每個節點代表一個元素、屬性或文字。

DOM 結構

DOM 的核心概念是「節點」（Node）。常見節點類型包括：

• 元素節點： 如 <div>、<p>、<a>
• 文字節點： 元素內的文字內容
• 屬性節點： 元素的屬性，如 id、class
• 文件節點： 整個 HTML 文件的根節點

存取 DOM 元素

JavaScript 提供多種方法來存取 DOM 元素：

• document.getElementById("id")：根據 ID 取得元素
• document.getElementsByClassName("class")：根據 class 取得元素集合
• document.querySelector("selector")：使用 CSS 選擇器取得第一個符合的元素
• document.querySelectorAll("selector")：取得所有符合的元素集合

操作 DOM

透過 JavaScript，可以動態修改 DOM 結構與內容：

• element.innerHTML：設定或取得元素的 HTML 內容
• element.textContent：設定或取得純文字內容
• element.setAttribute("name", "value")：設定屬性
• element.style.property：修改 CSS 樣式
• element.classList.add("class")：新增 class
• element.remove()：移除元素

事件處理

DOM 支援事件監聽與處理，常見事件包括 click、mouseover、keydown 等。可使用以下方式綁定事件：

document.getElementById("btn").addEventListener("click", function() {
  alert("按鈕被點擊！");
});
  

DOM 的重要性

DOM 是前端開發的核心技術之一，讓開發者能夠建立互動式網頁、響應使用者操作、動態更新內容。無論是表單驗證、動畫效果、SPA 架構或資料綁定，DOM 都扮演著不可或缺的角色。