第二節 DOM 樹結構 · EASYDOM

## DOM 樹結構 DOM 之所以可以訪問和更新 HTML 頁面中的內容、結構和樣式，是因為 DOM 將 HTML 頁面解析為一個 **樹結構**。例如下面這段代碼是一個簡單的 HTML 頁面源代碼: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>示例頁面</title> </head> <body> <h2>這是一個示例頁面</h2> <p id="p" title="this is p.">這是一個段落內容.</p> </body> </html> ``` 將上面的 HTML 頁面繪制成 DOM 樹結構，如下效果: ![](https://box.kancloud.cn/7b139570c987c5d40035e1c647fef81d_928x413.png) 通過上面的 DOM 樹結構，我們可以看到，`Document` 對象是作為 DOM 樹結構的入口。再根據 DOM 樹結構的特點，我們就可以定位到 HTML 頁面中任意一個元素、屬性或文本內容。瀏覽器加載并運行 HTML 頁面時，會創建 DOM 樹結構這個模型。并且 DOM 樹結構模型會被存儲在瀏覽器的內存中。 > 當 HTML 頁面內容過于龐大和復雜時，生成的 DOM 樹結構就越復雜。進而，瀏覽器加載 HTML 頁面的耗時就越長。 ## 什么是節點節點（Node）原本是網絡術語，表示網絡中的連接點。一個網絡是由一些節點構成的集合。在 DOM 樹結構中，節點也是很重要的一個概念。簡單來說，節點作為 DOM 樹結構中的連接點，最終構成了完整的 DOM 樹結構。 ### DOM 樹結構中的節點在 DOM 樹結構中，主要由以下 4 種節點組成: | 節點名稱 | 含義 | 描述 | | --- | --- | --- | | 文檔節點 | 表示整個 HTML 頁面（相當于 document 對象）| 當需要訪問任何標簽、屬性或文本時，都可以通過文檔節點進行導航 | | 元素節點 | 表示 HTML 頁面中的標簽（即 HTML 頁面的結構）| 當訪問 DOM 樹時，需要從查找元素節點開始 | | 屬性節點 | 表示 HTML 頁面中的開始標簽包含的屬性 | | | 文本節點 | 表示 HTML 頁面中的標簽所包含的文本內容 | | > 除了上面 4 種常見的節點類型以外，DOM 樹結構中還具有很多節點類型。 ![](https://box.kancloud.cn/10d7bd46558b51807612b094de9dfd89_1282x444.png) > 還有一些節點類型，目前已被廢棄（不再使用）。 ![](https://box.kancloud.cn/38369d662ecb913765756145ed89c77b_1098x317.png) ## DOM 節點樹結構通過**節點**概念，我們可以將原本的 DOM 樹結構改成 DOM 節點樹結構進行表示。 ![](https://box.kancloud.cn/113bc69e67856a911a0b015db354febb_1314x587.png) 在 DOM 的標準規范中，提供了 `Node` 對象。該對象主要依靠 DOM 節點樹結構中的常見 4 種節點類型，來訪問和更新 HTML 頁面中的內容。 > 關于 `Node` 對象，我們會在后面的章節中學習。 ## 節點之間的關系 DOM 中的 **M** 表示 **Model（模型）**，也可以用來表示 DOM 節點樹結構中節點之間的關系。在 DOM 節點樹結構中，主要具有以下三層關系。 ### 父級與子級如果我們將 HTML 頁面中某一個元素作為父級的話，那包含在該元素內的第一層所有元素都可以稱為該元素的子級。例如，我們來看一下下面這個 DOM 節點樹結構: ![](https://box.kancloud.cn/ad10f33eef20700a3273f84e6b02656d_1273x526.png) 在上面的 DOM 節點樹結構中，`<html>` 元素作為父級，`<head>` 和 `<body>` 元素作為子級。 ### 祖先與后代如果我們將 HTML 頁面中某一個元素作為祖先的話，那包含在該元素內的所有元素（除子級之外的）都可以稱為該元素的后代。例如，我們來看一下下面這個 DOM 節點樹結構: ![](https://box.kancloud.cn/17825314bba918cf1a55e3923910be89_1274x547.png) 在上面的 DOM 節點樹結構中，`<html>` 元素作為祖先，`<meta>`、`<title>`、`<h2>` 和 `<p>` 元素作為后代。 ### 兄弟關系具有相同父級元素的兩個或幾個元素之間就是兄弟關系。例如，我們來看一下下面這個 DOM 節點樹結構: ![](https://box.kancloud.cn/ba92740999faae40e5d87af9ac0ff1f5_1214x528.png) 在上面的 DOM 節點樹結構中，`<meta>` 和 `<title>` 元素就是兄弟關系。因為它們具有相同的父級元素 `<head>`。 > **值得注意的是:** `<title>` 和 `<h2>` 元素并不是兄弟關系。因為它們的父級元素并不是相同元素。 DOM 訪問和更新 HTML 頁面中的內容，主要依靠 DOM 節點樹結構中這三種節點關系完成。