DOM 元素樹結構與 DOM 節點樹結構很相似,區別僅在于是利用節點解析 HTML 元素,還是利用元素解析 HTML 元素。
## DOM 樹結構
還記得下面這張圖嗎?

上圖中的 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>
```
DOM 之所以可以訪問和更新 HTML 頁面中的內容、結構和樣式,是因為 DOM 將 HTML 頁面解析為一個 **樹結構**。
## DOM 元素樹
上述 HTML 頁面示例代碼,如果利用節點方式解析為 **DOM 節點樹結構** 的話,如下所示:

如果利用元素方式解析為 **DOM 元素樹結構** 的話,如下所示:

通過上圖所示,我們發現 DOM 元素樹結構與 DOM 節點樹結構類似,同樣在元素之間存在著某些固定的關系。
## 元素之間的關系
在 DOM 元素樹結構中,主要具有以下三層關系。
### 父級與子級
如果我們將 HTML 頁面中某一個元素作為父級的話,那包含在該元素內的第一層所有元素都可以稱為該元素的子級。
例如,我們來看一下下面這個 DOM 元素樹結構:

在上面的 DOM 節點樹結構中,`<html>` 元素作為父級,`<head>` 和 `<body>` 元素作為子級。
### 祖先與后代
如果我們將 HTML 頁面中某一個元素作為祖先的話,那包含在該元素內的所有元素(除子級之外的)都可以稱為該元素的后代。
例如,我們來看一下下面這個 DOM 元素樹結構:

在上面的 DOM 節點樹結構中,`<html>` 元素作為祖先,`<meta>`、`<title>`、`<h2>` 和 `<p>` 元素作為后代。
### 兄弟關系
具有相同父級元素的兩個或幾個元素之間就是兄弟關系。例如,我們來看一下下面這個 DOM 元素樹結構:

在上面的 DOM 元素樹結構中,`<meta>` 和 `<title>` 元素就是兄弟關系。因為它們具有相同的父級元素 `<head>`。
## 節點與元素的區別
利用節點解析 DOM 節點樹結構時,我們會發現元素節點、屬性節點和文本節點是獨立存在的。
如果獲取文本節點的話,文本節點是元素節點的子節點。所以,我們可以通過子節點方式得到指定的文本節點。
如果獲取屬性節點的話,由于屬性節點不是元素節點的子節點。所以,并不能直接通過獲取子節點的方式得到指定的屬性節點。
而利用元素解析 DOM 元素樹結構時,我們會發現元素、屬性和文本是從屬關系。什么意思呢? 我們可以簡單地將屬性和文本內容理解為是元素的一部分。
這樣,我們獲取屬性或文本內容時,就可以通過元素的獲取屬性或獲取文本內容的方法或屬性來實現。
關于節點與元素的區別,我們可以通過以下示例代碼來理解:
```javascript
// 節點方式獲取屬性節點
var btn = document.getElementById('btn');
var attrNode = btn.getAttributeNode('class');
var attrValue = attrNode.nodeValue;
// 元素方式獲取屬性
var btn = document.getElementById('btn');
var attrValue = btn.getAttribute('class');
```
- 關于
- 第一章 DOM 是什么
- 第一節 DOM 介紹
- 第二節 DOM 樹結構
- 第二章 Document 對象
- 第一節 Document 對象介紹
- 第二節 定位頁面元素
- 第三節 創建頁面元素
- 第三章 Node 對象
- 第一節 Node 對象介紹
- 第二節 判斷節點類型
- 第三節 遍歷節點
- 第四節 插入節點
- 第五節 刪除節點
- 第六節 替換節點
- 第七節 復制節點
- 第八節 textContent 屬性
- 第四章 Element 對象
- 第一節 Element 對象介紹
- 第二節 DOM 元素樹
- 第三節 定位頁面元素
- 第四節 遍歷元素
- 第五節 屬性操作
- 第六節 innerHTML 屬性
- 第五章 樣式操作
- 第一節 獲取內聯樣式
- 第二節 獲取外聯樣式表
- 第三節 獲取 class 屬性
- 第四節 獲取當前有效樣式
- 第五節 設置內聯樣式
- 第六節 設置 class 屬性
- 第七節 Element 對象的樣式屬性
- 第六章 事件
- 第一節 什么是事件
- 第二節 注冊事件
- 第三節 移除注冊事件
- 第四節 Event 事件對象
- 第五節 獲取目標元素
- 第六節 阻止默認行為
- 第七節 獲取鼠標坐標
- 第八節 事件流
- 第九節 事件委托
- 第七章 表單操作
- 第一節 獲取表單
- 第二節 表單操作
- 第三節 表單驗證
- 第四節 表單提交
- 第八章 BOM
- 第一節 BOM 是什么
- 第二節 Window 對象
- 第三節 Navigator 對象
- 第四節 History 對象
- 第五節 Location 對象
- 第六節 定時器