目錄
DOM 樹、DOM 對象、元素操作
一、DOM 樹與 DOM 對象
二、獲取 DOM 元素
1.?基礎方法
2.?現代方法（ES6+）
三、修改元素內容
四、修改元素常見屬性
1.?標準屬性
2.?通用方法
五、通過?style?修改樣式
六、通過類名修改樣式
1.?className?屬性
2.?classList?方法（推薦）
七、獲取和設置表單的值
1.?輸入框（input、textarea）
2.?單選/復選框（radio、checkbox）
3.?下拉框（select）
八、自定義屬性（data-*）
1.?定義與訪問
2.?修改自定義屬性
示例：全選反選案例
DOM 樹、DOM 對象、元素操作
DOM（Document Object Model）是瀏覽器將 HTML 或 XML 文檔解析為?樹形結構?的編程接口，開發者可通過 JavaScript 動態操作網頁內容、結構和樣式。
一、DOM 樹與 DOM 對象
-
DOM 樹
-
定義：瀏覽器將 HTML 文檔解析為?樹形結構?的層級模型，每個 HTML 標簽、屬性、文本都對應樹中的節點。
-
結構：包含根節點（
document）、元素節點、文本節點、屬性節點等。 -
作用：提供編程接口，讓 JavaScript 動態操作網頁內容。
-
-
DOM 對象
-
定義：DOM 樹中的每個節點都是一個?對象，擁有屬性和方法。
-
類型：
-
Element：元素節點（如?<div>）。 -
Text：文本節點。 -
Attr：屬性節點。 -
Document：整個文檔的入口。
-
-
-
DOM 樹示例
<!DOCTYPE html>
<html><head><title>DOM 示例</title></head><body><h1>標題</h1><p class="content">段落</p></body>
</html>document
├── html (元素節點)
│ ├── head (元素節點)
│ │ └── title (元素節點)
│ │ └── "DOM 示例" (文本節點)
│ └── body (元素節點)
│ ├── h1 (元素節點)
│ │ └── "標題" (文本節點)
│ └── p (元素節點)
│ ├── class="content" (屬性節點)
│ └── "段落" (文本節點)
└── ...二、獲取 DOM 元素
1.?基礎方法
| 方法 | 返回類型 | 示例 |
|---|---|---|
document.getElementById() | 單個元素 | document.getElementById("box") |
document.getElementsByClassName() | HTMLCollection（動態） | document.getElementsByClassName("item") |
document.getElementsByTagName() | HTMLCollection（動態） | document.getElementsByTagName("div") |
2.?現代方法（ES6+）
| 方法 | 返回類型 | 示例 |
|---|---|---|
document.querySelector() | 單個元素 | document.querySelector(".container") |
document.querySelectorAll() | NodeList（靜態） | document.querySelectorAll("li") |
區別：
-
動態集合（如?
HTMLCollection）：元素變化時自動更新。const items = document.getElementsByClassName("item"); console.log(items.length); // 假設初始為 2 document.body.appendChild(document.createElement("div")); // 動態集合長度自動更新 console.log(items.length); // 3 -
靜態集合（如?
NodeList）：查詢后不再更新。const list = document.querySelectorAll("li"); console.log(list.length); // 假設初始為 3 document.body.appendChild(document.createElement("li")); console.log(list.length); // 仍為 3
三、修改元素內容
| 屬性/方法 | 說明 | 示例 |
|---|---|---|
innerHTML | 獲取或設置元素的 HTML 內容（解析標簽） | element.innerHTML = "<b>加粗</b>" |
textContent | 獲取或設置元素的文本內容（不解析標簽） | element.textContent = "純文本" |
innerText | 獲取可見文本（考慮樣式，性能較低） | element.innerText = "可見文本" |
注意：
-
innerHTML?可能引發 XSS 攻擊（避免插入未經驗證的用戶輸入）。 -
textContent?性能優于?innerText。
四、修改元素常見屬性
| 方法 | 說明 | 示例 |
|---|---|---|
getAttribute() | 獲取屬性值 | element.getAttribute("href") |
setAttribute() | 設置屬性值 | element.setAttribute("class", "active") |
removeAttribute() | 刪除屬性 | element.removeAttribute("disabled") |
| 直接訪問屬性 | 通過元素屬性名快速訪問（部分屬性需特殊處理） | element.id = "newId" |
1.?標準屬性
直接通過 DOM 對象屬性操作：
element.id = "newId"; // 修改 id
element.className = "active"; // 修改 class（覆蓋原有類）
element.href = "https://example.com"; // 修改鏈接2.?通用方法
element.setAttribute("屬性名", "值"); // 設置屬性
element.getAttribute("屬性名"); // 獲取屬性
element.removeAttribute("屬性名"); // 刪除屬性示例：
const img = document.querySelector("img");
img.setAttribute("src", "new-image.jpg");
img.removeAttribute("alt");五、通過?style?修改樣式
| 方法 | 說明 | 示例 |
|---|---|---|
style?屬性 | 修改內聯樣式 | element.style.color = "red" |
classList | 操作類名（添加、刪除、切換） | element.classList.add("active") |
window.getComputedStyle() | 獲取最終計算的樣式（包括外部 CSS） | getComputedStyle(element).fontSize |
直接操作元素的?style?屬性（修改內聯樣式）：
element.style.color = "red"; // 單個樣式
element.style.backgroundColor = "#fff"; // 駝峰命名
element.style.cssText = "color: red; font-size: 16px;"; // 批量設置注意：
-
修改?
style?只影響內聯樣式，優先級高于外部 CSS。 -
頻繁操作?
style?可能觸發重繪（性能敏感時需優化）。
六、通過類名修改樣式
1.?className?屬性
直接覆蓋所有類名：
element.className = "class1 class2"; // 覆蓋原有類2.?classList?方法（推薦）
精細控制類名：
element.classList.add("new-class"); // 添加類
element.classList.remove("old-class"); // 刪除類
element.classList.toggle("active"); // 切換類（存在則刪除，否則添加）
element.classList.contains("active"); // 檢查是否包含類優勢：
-
避免覆蓋其他類名。
-
支持鏈式調用：
element.classList.add("a").remove("b")。
七、獲取和設置表單的值
1.?輸入框（input、textarea）
const input = document.querySelector("input");
// 獲取值
console.log(input.value);
// 設置值
input.value = "新內容";2.?單選/復選框（radio、checkbox）
const checkbox = document.querySelector("input[type=checkbox]");
// 獲取選中狀態
console.log(checkbox.checked); // true/false
// 設置選中狀態
checkbox.checked = true;3.?下拉框（select）
const select = document.querySelector("select");
// 獲取選中值
console.log(select.value);
// 設置選中值
select.value = "option2";八、自定義屬性（data-*）
1.?定義與訪問
HTML 中定義自定義屬性：
<div id="user" data-id="123" data-user-name="Alice"></div>JavaScript 通過?dataset?訪問：
const user = document.getElementById("user");
console.log(user.dataset.id); // "123"
console.log(user.dataset.userName); // "Alice"（駝峰命名轉換）2.?修改自定義屬性
user.dataset.id = "456"; // 修改 data-id
user.dataset.userRole = "admin"; // 添加 data-user-role
delete user.dataset.userName; // 刪除 data-user-name注意：
-
屬性名需符合?
data-*?格式。 -
dataset?會自動將短橫線命名轉為駝峰式（如?data-user-name?→?userName）。
示例：全選反選案例
<body><table><tr><th class="allCheck"><input type="checkbox" name="" id="checkAll"> <span class="all">全選</span></th><th>商品</th><th>商家</th><th>價格</th></tr><tr><td><input type="checkbox" name="check" class="ck"></td><td>小米手機</td><td>小米</td><td>￥1999</td></tr><tr><td><input type="checkbox" name="check" class="ck"></td><td>小米凈水器</td><td>小米</td><td>￥4999</td></tr><tr><td><input type="checkbox" name="check" class="ck"></td><td>小米電視</td><td>小米</td><td>￥5999</td></tr></table><script>const checkAll = document.querySelector('#checkAll')const checks = document.querySelectorAll('.ck')checkAll.addEventListener('click', function () {for (let i = 0; i < checks.length; i++) {checks[i].checked = checkAll.checked}})for (let i = 0; i < checks.length; i++) {checks[i].addEventListener('click', function () {checkAll.checked = document.querySelectorAll('.ck:checked').length === checks.length})}</script>
</body>
