## DOM 樹結(jié)構(gòu)
DOM 之所以可以訪問(wèn)和更新 HTML 頁(yè)面中的內(nèi)容、結(jié)構(gòu)和樣式，是因?yàn)?DOM 將 HTML 頁(yè)面解析為一個(gè) **樹結(jié)構(gòu)**。
例如下面這段代碼是一個(gè)簡(jiǎn)單的 HTML 頁(yè)面源代碼:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>示例頁(yè)面</title>
</head>
<body>
<h2>這是一個(gè)示例頁(yè)面</h2>
<p id="p" title="this is p.">這是一個(gè)段落內(nèi)容.</p>
</body>
</html>
```
將上面的 HTML 頁(yè)面繪制成 DOM 樹結(jié)構(gòu)，如下效果:
通過(guò)上面的 DOM 樹結(jié)構(gòu)，我們可以看到，`Document` 對(duì)象是作為 DOM 樹結(jié)構(gòu)的入口。再根據(jù) DOM 樹結(jié)構(gòu)的特點(diǎn)，我們就可以定位到 HTML 頁(yè)面中任意一個(gè)元素、屬性或文本內(nèi)容。
瀏覽器加載并運(yùn)行 HTML 頁(yè)面時(shí)，會(huì)創(chuàng)建 DOM 樹結(jié)構(gòu)這個(gè)模型。并且 DOM 樹結(jié)構(gòu)模型會(huì)被存儲(chǔ)在瀏覽器的內(nèi)存中。
> 當(dāng) HTML 頁(yè)面內(nèi)容過(guò)于龐大和復(fù)雜時(shí)，生成的 DOM 樹結(jié)構(gòu)就越復(fù)雜。進(jìn)而，瀏覽器加載 HTML 頁(yè)面的耗時(shí)就越長(zhǎng)。
## 什么是節(jié)點(diǎn)
節(jié)點(diǎn)（Node）原本是網(wǎng)絡(luò)術(shù)語(yǔ)，表示網(wǎng)絡(luò)中的連接點(diǎn)。一個(gè)網(wǎng)絡(luò)是由一些節(jié)點(diǎn)構(gòu)成的集合。
在 DOM 樹結(jié)構(gòu)中，節(jié)點(diǎn)也是很重要的一個(gè)概念。簡(jiǎn)單來(lái)說(shuō)，節(jié)點(diǎn)作為 DOM 樹結(jié)構(gòu)中的連接點(diǎn)，最終構(gòu)成了完整的 DOM 樹結(jié)構(gòu)。
### DOM 樹結(jié)構(gòu)中的節(jié)點(diǎn)
在 DOM 樹結(jié)構(gòu)中，主要由以下 4 種節(jié)點(diǎn)組成:
| 節(jié)點(diǎn)名稱 | 含義 | 描述 |
| --- | --- | --- |
| 文檔節(jié)點(diǎn) | 表示整個(gè) HTML 頁(yè)面（相當(dāng)于 document 對(duì)象）| 當(dāng)需要訪問(wèn)任何標(biāo)簽、屬性或文本時(shí)，都可以通過(guò)文檔節(jié)點(diǎn)進(jìn)行導(dǎo)航 |
| 元素節(jié)點(diǎn) | 表示 HTML 頁(yè)面中的標(biāo)簽（即 HTML 頁(yè)面的結(jié)構(gòu)）| 當(dāng)訪問(wèn) DOM 樹時(shí)，需要從查找元素節(jié)點(diǎn)開(kāi)始 |
| 屬性節(jié)點(diǎn) | 表示 HTML 頁(yè)面中的開(kāi)始標(biāo)簽包含的屬性 | |
| 文本節(jié)點(diǎn) | 表示 HTML 頁(yè)面中的標(biāo)簽所包含的文本內(nèi)容 | |
> 除了上面 4 種常見(jiàn)的節(jié)點(diǎn)類型以外，DOM 樹結(jié)構(gòu)中還具有很多節(jié)點(diǎn)類型。
> 還有一些節(jié)點(diǎn)類型，目前已被廢棄（不再使用）。
## DOM 節(jié)點(diǎn)樹結(jié)構(gòu)
通過(guò)**節(jié)點(diǎn)**概念，我們可以將原本的 DOM 樹結(jié)構(gòu)改成 DOM 節(jié)點(diǎn)樹結(jié)構(gòu)進(jìn)行表示。
在 DOM 的標(biāo)準(zhǔn)規(guī)范中，提供了 `Node` 對(duì)象。該對(duì)象主要依靠 DOM 節(jié)點(diǎn)樹結(jié)構(gòu)中的常見(jiàn) 4 種節(jié)點(diǎn)類型，來(lái)訪問(wèn)和更新 HTML 頁(yè)面中的內(nèi)容。
> 關(guān)于 `Node` 對(duì)象，我們會(huì)在后面的章節(jié)中學(xué)習(xí)。
## 節(jié)點(diǎn)之間的關(guān)系
DOM 中的 **M** 表示 **Model（模型）**，也可以用來(lái)表示 DOM 節(jié)點(diǎn)樹結(jié)構(gòu)中節(jié)點(diǎn)之間的關(guān)系。
在 DOM 節(jié)點(diǎn)樹結(jié)構(gòu)中，主要具有以下三層關(guān)系。
### 父級(jí)與子級(jí)
如果我們將 HTML 頁(yè)面中某一個(gè)元素作為父級(jí)的話，那包含在該元素內(nèi)的第一層所有元素都可以稱為該元素的子級(jí)。
例如，我們來(lái)看一下下面這個(gè) DOM 節(jié)點(diǎn)樹結(jié)構(gòu):
在上面的 DOM 節(jié)點(diǎn)樹結(jié)構(gòu)中，`<html>` 元素作為父級(jí)，`<head>` 和 `<body>` 元素作為子級(jí)。
### 祖先與后代
如果我們將 HTML 頁(yè)面中某一個(gè)元素作為祖先的話，那包含在該元素內(nèi)的所有元素（除子級(jí)之外的）都可以稱為該元素的后代。
例如，我們來(lái)看一下下面這個(gè) DOM 節(jié)點(diǎn)樹結(jié)構(gòu):
在上面的 DOM 節(jié)點(diǎn)樹結(jié)構(gòu)中，`<html>` 元素作為祖先，`<meta>`、`<title>`、`<h2>` 和 `<p>` 元素作為后代。
### 兄弟關(guān)系
具有相同父級(jí)元素的兩個(gè)或幾個(gè)元素之間就是兄弟關(guān)系。例如，我們來(lái)看一下下面這個(gè) DOM 節(jié)點(diǎn)樹結(jié)構(gòu):
在上面的 DOM 節(jié)點(diǎn)樹結(jié)構(gòu)中，`<meta>` 和 `<title>` 元素就是兄弟關(guān)系。因?yàn)樗鼈兙哂邢嗤母讣?jí)元素 `<head>`。
> **值得注意的是:** `<title>` 和 `<h2>` 元素并不是兄弟關(guān)系。因?yàn)樗鼈兊母讣?jí)元素并不是相同元素。
DOM 訪問(wèn)和更新 HTML 頁(yè)面中的內(nèi)容，主要依靠 DOM 節(jié)點(diǎn)樹結(jié)構(gòu)中這三種節(jié)點(diǎn)關(guān)系完成。
- 關(guān)于
- 第一章 DOM 是什么
- 第一節(jié) DOM 介紹
- 第二節(jié) DOM 樹結(jié)構(gòu)
- 第二章 Document 對(duì)象
- 第一節(jié) Document 對(duì)象介紹
- 第二節(jié) 定位頁(yè)面元素
- 第三節(jié) 創(chuàng)建頁(yè)面元素
- 第三章 Node 對(duì)象
- 第一節(jié) Node 對(duì)象介紹
- 第二節(jié) 判斷節(jié)點(diǎn)類型
- 第三節(jié) 遍歷節(jié)點(diǎn)
- 第四節(jié) 插入節(jié)點(diǎn)
- 第五節(jié) 刪除節(jié)點(diǎn)
- 第六節(jié) 替換節(jié)點(diǎn)
- 第七節(jié) 復(fù)制節(jié)點(diǎn)
- 第八節(jié) textContent 屬性
- 第四章 Element 對(duì)象
- 第一節(jié) Element 對(duì)象介紹
- 第二節(jié) DOM 元素樹
- 第三節(jié) 定位頁(yè)面元素
- 第四節(jié) 遍歷元素
- 第五節(jié) 屬性操作
- 第六節(jié) innerHTML 屬性
- 第五章 樣式操作
- 第一節(jié) 獲取內(nèi)聯(lián)樣式
- 第二節(jié) 獲取外聯(lián)樣式表
- 第三節(jié) 獲取 class 屬性
- 第四節(jié) 獲取當(dāng)前有效樣式
- 第五節(jié) 設(shè)置內(nèi)聯(lián)樣式
- 第六節(jié) 設(shè)置 class 屬性
- 第七節(jié) Element 對(duì)象的樣式屬性
- 第六章 事件
- 第一節(jié) 什么是事件
- 第二節(jié) 注冊(cè)事件
- 第三節(jié) 移除注冊(cè)事件
- 第四節(jié) Event 事件對(duì)象
- 第五節(jié) 獲取目標(biāo)元素
- 第六節(jié) 阻止默認(rèn)行為
- 第七節(jié) 獲取鼠標(biāo)坐標(biāo)
- 第八節(jié) 事件流
- 第九節(jié) 事件委托
- 第七章 表單操作
- 第一節(jié) 獲取表單
- 第二節(jié) 表單操作
- 第三節(jié) 表單驗(yàn)證
- 第四節(jié) 表單提交
- 第八章 BOM
- 第一節(jié) BOM 是什么
- 第二節(jié) Window 對(duì)象
- 第三節(jié) Navigator 對(duì)象
- 第四節(jié) History 對(duì)象
- 第五節(jié) Location 對(duì)象
- 第六節(jié) 定時(shí)器