# JavaScript中DOM指的是什么意思
## 一、DOM的基本概念
DOM（Document Object Model，文檔對象模型）是JavaScript與網頁交互的核心接口。它是由W3C制定的標準編程接口，將HTML或XML文檔抽象為樹狀結構，使開發者能夠通過腳本語言（如JavaScript）動態訪問和修改文檔內容、結構及樣式。
### 1.1 DOM的本質
DOM不是編程語言，而是一個跨平臺的、獨立于語言的API。它將文檔解析為由節點（Node）和對象組成的結構化表示，每個HTML元素（如`<div>`、`<p>`）都對應DOM樹中的一個節點。
### 1.2 標準化過程
- DOM Level 1 (1998)：基礎節點操作
- DOM Level 2 (2000)：添加事件模型
- DOM Level 3 (2004)：擴展XML支持
- DOM Living Standard (現行標準)：由WHATWG維護的動態標準
## 二、DOM的樹狀結構
```html
<!DOCTYPE html>
<html>
<head>
<title>示例</title>
</head>
<body>
<h1>DOM樹示例</h1>
<p id="content">段落文本</p>
</body>
</html>
對應的DOM樹結構：
document
├─ html
├─ head
│ └─ title
│ └─ "示例"
└─ body
├─ h1
│ └─ "DOM樹示例"
└─ p (id="content")
└─ "段落文本"
| 節點類型 | NodeType值 | 示例 |
|---|---|---|
| Element Node | 1 | <div>, <p> |
| Attribute Node | 2 | class=“example” |
| Text Node | 3 | “Hello World” |
| Comment Node | 8 | <!-- 注釋 --> |
| Document Node | 9 | document |
// 獲取單個元素
const elem = document.getElementById('content');
// 獲取多個元素（返回NodeList）
const elems = document.querySelectorAll('.class');
// 層級訪問
const parent = elem.parentNode;
const children = elem.childNodes;
// 創建節點
const newDiv = document.createElement('div');
// 添加節點
document.body.appendChild(newDiv);
// 修改內容
elem.innerHTML = '<strong>新內容</strong>';
elem.textContent = '純文本內容';
// 刪除節點
elem.removeChild(childNode);
// 獲取/設置屬性
const id = elem.getAttribute('id');
elem.setAttribute('data-value', '123');
// class操作
elem.classList.add('active');
elem.classList.toggle('hidden');
優化建議：
// 不良實踐（觸發多次重排）
for(let i=0; i<100; i++) {
element.style.width = i + 'px';
}
// 優化方案（使用文檔片段）
const fragment = document.createDocumentFragment();
// ...批量操作
document.body.appendChild(fragment);
// 返回匹配的第一個元素
document.querySelector('.class');
// 檢查元素匹配
elem.matches('div[data-attr]');
// MutationObserver監聽DOM變化
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
console.log('DOM已修改', mutation);
});
});
observer.observe(targetElement, {
attributes: true,
childList: true
});
DOM作為瀏覽器環境的基石，具有以下關鍵特性： 1. 平臺中立：獨立于編程語言的通用接口 2. 動態訪問：實時反映文檔當前狀態 3. 事件驅動：通過事件機制實現交互響應 4. 性能敏感：不當操作可能引發性能問題
理解DOM模型是掌握前端開發的基礎，現代框架（如React、Vue）在底層仍依賴DOM操作，但通過虛擬DOM等技術進行了優化封裝。 “`
（全文約850字，包含代碼示例和結構化說明）
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
