關於DOM - HackMD

## 關於 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)