文件物件模型
文件物件模型（Document Object Model，簡稱DOM）係一個標準化嘅編程介面，用嚟操作 HTML 同 XML 文件。DOM 會將文件轉化成一棵結構化嘅樹，呢棵樹入面每個節點（Node）都代表文件嘅一部分，例如元素（Element）、屬性（Attribute）或者文本（Text）。DOM 嘅主要用處係俾開發者可以用程式碼動態改變網頁嘅內容、結構同樣式，從而實現互動性網頁效果。喺網頁開發度，JavaScript 係最常用嚟操作 DOM 嘅語言。
簡介
[編輯]DOM 係網頁開發入面嘅核心技術，通過 DOM，可以：
- 讀取或者改變 HTML 結構。
- 改變顯示樣式。
- 處理用戶互動事件。
結構
[編輯]DOM 係一個樹狀結構，頂部係「文件根節點」（Document Root Node），跟住下面有唔同嘅子節點，例如：
- 元素節點（Element Node）：例如 div、p 呢啲 HTML 標籤。
- 屬性節點（Attribute Node）：HTML 標籤上嘅屬性，例如 id 或 class。
- 文本節點（Text Node）：標籤入面嘅文字內容。
DOM 操作功能
[編輯]DOM 俾咗開發者一系列方法同屬性，方便用程式碼嚟操作文件。
選取 DOM 節點
[編輯]開發者可以用以下方法搵到 DOM 入面嘅節點：
- getElementById(id)：根據 ID 選取元素。
- getElementsByClassName(className)：根據 class 選取元素。
- getElementsByTagName(tagName)：根據標籤名選取元素。
- querySelector(selector)：用 CSS 選擇器選取第一個匹配元素。
- querySelectorAll(selector)：用 CSS 選擇器選取所有匹配元素。
例子：
let paragraph = document.querySelector("#myParagraph");
// 改變 HTML 內容
paragraph.innerHTML = "呢段係新嘅 <strong>HTML</strong> 內容！";
// 改變純文本
paragraph.textContent = "呢段係純文字內容。";
// 修改輸入框值
let input = document.querySelector("#myInput");
input.value = "新嘅輸入值";
修改內容
[編輯]用以下方法可以改變節點嘅內容：
- innerHTML：設定或者取得節點入面嘅 HTML 內容。
- textContent：設定或者取得純文本（唔包含 HTML）。
- value：針對表單元素（例如 <input>）設定或者取得值。
例子：
let paragraph = document.querySelector("#myParagraph");
// 改變 HTML 內容
paragraph.innerHTML = "呢段係新嘅 <strong>HTML</strong> 內容！";
// 改變純文本
paragraph.textContent = "呢段係純文字內容。";
// 修改輸入框值
let input = document.querySelector("#myInput");
input.value = "新嘅輸入值";
操作屬性
[編輯]DOM 俾咗方法嚟讀取或者改變 HTML 標籤嘅屬性：
- getAttribute(attrName)：搵到某個屬性嘅值。
- setAttribute(attrName, value)：設定某個屬性嘅值。
- removeAttribute(attrName)：移除某個屬性。
例子：
let link = document.querySelector("a");
// 搵到 href 屬性
console.log(link.getAttribute("href"));
// 改變 target 屬性
link.setAttribute("target", "_blank");
// 移除 title 屬性
link.removeAttribute("title");
操作樣式
[編輯]DOM 俾咗兩種方法嚟改變元素嘅樣式：
- 直接改變內聯樣式：用 style。
- 操作 class 名：用 classList。
例子：
let div = document.querySelector(".box");
// 直接改變樣式
div.style.backgroundColor = "blue";
div.style.fontSize = "18px";
// 操作 class
div.classList.add("highlight"); // 加 class
div.classList.remove("hidden"); // 移除 class
if (!div.classList.contains("active")) {
div.classList.add("active");
}
新增同刪除節點
[編輯]DOM 可以動態新增或者刪除節點：
- createElement(tagName)：創建新元素。
- appendChild(child)：新增子元素。
- removeChild(child)：刪除子元素。
例子：
let newDiv = document.createElement("div");
newDiv.textContent = "呢個係新元素！";
// 新增到頁面
let container = document.querySelector("#container");
container.appendChild(newDiv);
// 刪除元素
container.removeChild(newDiv);
事件處理
[編輯]DOM 事件（Event）可以監聽用戶操作，例如點擊（click）、滑鼠移動（mousemove）、鍵盤輸入（keydown）等等：
- addEventListener(event, callback)：監聽事件。
- removeEventListener(event, callback)：移除監聽器。
例子：
let button = document.querySelector("#myButton");
// 監聽點擊事件
button.addEventListener("click", function () {
alert("按咗個掣！");
});
// 移除事件監聽
function handleClick() {
console.log("掣被點擊！");
}
button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick);
應用場景
[編輯]- 動態更新內容：例如用戶輸入數據後即時更新顯示。
- 表單驗證：檢查用戶輸入嘅格式。
- 動畫效果：例如滑動選單、圖片輪播。
- 事件處理：例如點擊按鈕執行動作。
- 資料獲取：用 AJAX 或 Fetch API 同伺服器互動，將資料動態渲染到網頁。