文件物件模型

**文件物件模型**（**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 選擇器選取所有匹配元素。

例子：

```javascript
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：針對表單元素（例如 ）設定或者取得值。
例子：

```javascript
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)：移除某個屬性。
例子：

```javascript
let link = document.querySelector("a");

// 搵到 href 屬性
console.log(link.getAttribute("href"));

// 改變 target 屬性
link.setAttribute("target", "_blank");

// 移除 title 屬性
link.removeAttribute("title");
```


### 操作樣式
DOM 俾咗兩種方法嚟改變元素嘅樣式：
*直接改變內聯樣式：用 style。
*操作 class 名：用 classList。
例子：

```javascript
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)：刪除子元素。
例子：

```javascript
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)：移除監聽器。
例子：

```javascript
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 同伺服器互動，將資料動態渲染到網頁。

## 出面網頁
*文件物件模型 (DOM)