---
# System prepended metadata

title: 關於DOM
tags: [前端工程]

---

## 關於 DOM 統整

DOM（文件物件模型，Document Object Model）是一種W3C推薦的標準程式介面，用來表示和操作HTML或XML文檔。它將文檔轉換為樹狀結構，使開發者能夠通過程式碼存取並修改文檔的內容、結構及樣式。

### DOM 核心概念
1. **定義**：DOM 是為標記語言（如HTML、XML）提供可編程接口的標準。它將文檔的各個元素視為對象，並組織成樹狀結構，方便程式操作。
2. **樹狀結構**：每個元素都是一個節點（Node），彼此之間有父子關係，例如整個文檔是根節點，<html>、<head>、<body>等為其子節點。
   
### DOM 的主要組成部分
1. **Document**：整個HTML或XML文檔的根節點。
2. **Element**：每個HTML標籤（如`<div>、<p>`）都是元素節點。
3. **Text**：被元素包圍的文本，如`<h1>Hello World</h1>`中的"Hello World"。
4. **Attribute**：描述元素的屬性，如class或id。

### DOM 的使用
1. **操作DOM**：可以使用JavaScript操作DOM，如獲取、修改、添加或刪除元素。
   - **獲取元素**：如 `document.getElementById()`。
   - **修改內容**：如 `.innerText` 或 `.setAttribute()`。
   - **添加/刪除元素**：動態創建或移除節點。

### 常見API
- `getElementById(id)`
- `getElementsByClassName(className)`
- `querySelector(selector)`
- `querySelectorAll(selector)`

## 🌐 Sources
1. [tsg.com.tw - DOM是什麼？文件物件模型基礎介紹](https://www.tsg.com.tw/blog-detail4-169-0-dom.htm)
2. [MDN - 文件物件模型(DOM)](https://developer.mozilla.org/zh-TW/docs/Web/API/Document_Object_Model)
3. [hsuchihting.github.io - JS 筆記- 認識DOM 文件物件模型](https://hsuchihting.github.io/javascript/20200615/1316819935/)
4. [維基百科 - 文件物件模型](https://zh.wikipedia.org/zh-tw/DOM)
5. [ithelp.ithome.com.tw - 認識DOM 文件物件模型](https://ithelp.ithome.com.tw/m/articles/10241371)