# 遍歷節點
Node 對象提供了一系列的屬性和方法用來利用 DOM 節點樹結構中節點的關系實現遍歷其中的節點。
> **關于節點之間的關系**,可以參考《DOM樹結構》一節有關節點之間關系的內容。
## 獲取父節點
通過 HTML 頁面中指定元素查找其父級節點,我們可以使用 Node 對象的 parentNode 屬性實現:
```javascript
pNode = node.parentNode;
```
在上述語法結構中,parentNode 屬性返回指定節點的父節點。
> **值得注意的是:** 一個元素節點的父節點,可能是一個元素節點,也可能是一個文檔節點。
以下代碼示例,就是通過 parentNode 屬性獲取指定節點的父節點,再實現其他操作的:
```javascript
var btn = document.getElementById('btn');
var parentNode = btn.parentNode;
var className = parentNode.className;
className += ' animate';
parentNode.className = className;
```
### 獲取父元素節點
Node 對象除了提供了 parentNode 屬性可以獲取指定節點的父節點之外,還提供了 parentElement 屬性獲取指定節點的父元素節點。
```javascript
parentElementNode = node.parentElement;
```
在上述語法結構中,parentElement 屬性返回指定節點的父元素節點。
> **值得注意的是:** 如果一個節點沒有父節點,或者父節點不是一個元素節點的話,parentElement 屬性返回 null。
以下代碼示例,就是通過 parentElement 屬性獲取指定節點的父元素節點,再實現其他操作的:
```javascript
var btn = document.getElementById('btn');
var parentElement = btn.parentElement;
var className = parentElement.className;
className += ' animate';
parentElement.className = className;
```
### 父節點與父元素節點的區別
所謂父節點,并沒有指定某個節點的父節點一定是哪個類型的節點。而父元素節點,指定了某個節點的父節點一定是元素節點。
- parentNode: 獲取指定節點的父節點,其父節點不一定是元素節點。
- parentElement: 獲取指定節點的父元素節點,其父節點必須是元素節點。
如果我們獲取 `<html>` 元素的父節點的話,就是 document 文檔節點。而 document 文檔節點并不是一個元素節點。如下述代碼示例:
```javascript
// 獲取 <html> 元素
var html = document.documentElement;
console.log('parentNode: ' + html.parentNode);
console.log('parentElement: ' + html.parentElement);
```
上述代碼示例,輸出的結果如下:

## 獲取子節點
通過 HTML 頁面中指定元素查找其子節點,我們可以通過以下 Node 對象的屬性實現:
| 屬性名 | 描述 |
| --- | --- |
| childNodes | 獲取指定節點的所有子節點 |
| firstChild | 獲取指定節點的第一個子節點 |
| lastChild | 獲取指定節點的最后一個子節點 |
> **值得注意的是:** HTML 頁面中某個元素的子節點不一定是唯一的。
### 獲取所有子節點
Node 對象提供了 childNodes 屬性用于獲取 HTML 頁面中指定節點的所有子節點:
```javascript
var ndList = Node.childNodes;
```
在上述語法結構中,childNodes 屬性的返回值 ndList 是一個 NodeList 對象,并且為只讀。該屬性獲取一個包含指定節點的所有子節點的集合。
> **值得注意的是:** childNodes 屬性返回的是一個動態的 NodeList 對象。有關動態 NodeList 的內容,請參考《定位頁面元素》一節的內容。
以下代碼示例,就是通過指定節點獲取其所有子節點,再實現其他操作的:
```javascript
var parentNode = document.getElementById('parent');
var children = parentNode.childNodes;
console.log(children);
```
上述代碼示例,輸出的結果如下:

我們會發現,獲取到的所有子節點,除了真正的子節點 `<button>` 之外,還具有 4 個文本節點。
### 空白節點
主流瀏覽器解析 HTML 頁面內容為 DOM 節點樹結構時,會產生空文本的空白節點。這是由 HTML 頁面源代碼中的換行引起的:
```html
<div id="parent" class="button-group">
<button id="btn" name="btn" class="button">A Button</button>
<button name="btn" class="button">A Button</button>
<button name="btn" class="button">A Button</button>
</div>
```
上述代碼示例的 DOM 節點樹結構如下圖所示:

如果將 HTML 頁面的源代碼編寫成一行時,這個空白節點的問題可以得到解決。但這種解決方式妨礙了我們代碼的可讀性,并不建議這樣解決。
> **值得注意的是:** IE 8 及之前版本的瀏覽器中不存在空白節點問題。
### 空白節點的解決方案
在開發中,空白節點的問題將 DOM 節點樹結構的解析及操作增加了不少的難度和麻煩。我們這里提供一種比較簡單有效的解決方式:
1. 棄用 DOM 中 Node 對象用于獲取指定節點的子節點和兄弟節點的屬性。
2. 通過使用 getElementsByTagName() 方法實現相應功能。
比如我們要查找 HTML 頁面指定元素的所有子節點的話,我們按照如下代碼示例實現:
```javascript
var parentNode = document.getElementById('parent');
var children = parentNode.getElementsByTagName('button');
console.log(children);
```
上述代碼示例運行的結果如下:

> 關于 DOM 中為什么要具有空白節點以及更完整的解決方案,可以參考 Mozilla 社區的[《DOM 中的空白符》](https://developer.mozilla.org/zh-CN/docs/Web/Guide/API/DOM/Whitespace_in_the_DOM)。
### 獲取第一個子節點
Node 對象提供了 firstChild 屬性用于獲取指定節點的第一個子節點:
```javascript
var first_child = node.firstChild;
```
在上述語法結構中,firstChild 屬性返回的 first_child 表示當前節點的第一個子節點的引用。
> **值得注意的是:** 如果當前節點無子節點,則 firstChild 屬性返回?null。
以下代碼示例,就是通過指定節點獲取其第一個子節點,再實現其他操作的:
```javascript
var parentNode = document.getElementById('parent');
var firstChild = parentNode.firstChild;
```
通過上述代碼示例,我們最終得到依舊是空白節點,而并非第一個子節點。
```javascript
var parentNode = document.getElementById('parent');
var firstChild = parentNode.getElementsByTagName('button')[0];
console.log(firstChild);
```
通過 getElementsByTagName() 方法替換之后,所得到的節點才是真正的第一個節點。
### 獲取最后一個節點
Node 對象提供了 lastChild 屬性用于獲取指定節點的最后一個子節點:
```javascript
var last_child = node.lastChild;
```
在上述語法結構中,lastChild 屬性返回的 last_child 表示當前節點的最后一個子節點的引用。
> **值得注意的是:** 如果當前節點無子節點,則 lastChild 屬性返回?null。
以下代碼示例,就是通過指定節點獲取其最后一個子節點,再實現其他操作的:
```javascript
var parentNode = document.getElementById('parent');
var lastChild = parentNode.lastChild;
```
通過上述代碼示例,我們最終得到依舊是空白節點,而并非最后一個子節點。
```javascript
var parentNode = document.getElementById('parent');
var children = parentNode.getElementsByTagName('button');
var lastChild = children[children.length-1];
```
通過 getElementsByTagName() 方法替換之后,所得到的節點才是真正的最后一個節點。
## 獲取相鄰兄弟節點
通過 HTML 頁面中指定元素查找其相鄰兄弟節點,我們可以通過以下 Node 對象的屬性實現:
| 屬性名 | 描述 |
| --- | --- |
| previousSibling | 獲取指定節點的前面相鄰兄弟節點 |
| nextSibling | 獲取指定節點的后面相鄰兄弟節點 |
### 獲取相鄰前面兄弟節點
Node 對象提供了 previousSibling 屬性用于獲取指定節點的前面相鄰兄弟節點:
```javascript
previousNode = node.previousSibling;
```
在上述語法結構中,previousSibling 屬性返回的 previousNode 表示當前節點的前一個兄弟節點。
> **值得注意的是:** 如果當前節點無前一個兄弟節點,則 previousSibling 屬性返回?null。
以下代碼示例,就是通過指定節點獲取其前面相鄰兄弟節點,再實現其他操作的:
```javascript
var elem = document.getElementById('btn');
var previousSibling = elem.previousSibling;
```
通過上述代碼示例,我們最終得到依舊是空白節點,而并非前面相鄰兄弟節點。
```javascript
// 判斷獲取的兄弟節點是否為元素節點
if ( previousSibling.nodeType != 1){
previousSibling = previousSibling.previousSibling;
}
```
通過判斷獲取的節點類型是否為元素節點,實現如何獲取真正的前面相鄰兄弟節點。
### 獲取相鄰后面兄弟節點
Node 對象提供了 nextSibling 屬性用于獲取指定節點的后面相鄰兄弟節點:
```javascript
nextNode = node.nextSibling;
```
在上述語法結構中,nextSibling 屬性返回的 nextNode 表示當前節點的后一個兄弟節點。
> **值得注意的是:** 如果當前節點無后一個兄弟節點,則 nextSibling 屬性返回?null。
以下代碼示例,就是通過指定節點獲取其后面相鄰兄弟節點,再實現其他操作的:
```javascript
var elem = document.getElementById('btn');
var nextSibling = elem.nextSibling;
```
通過上述代碼示例,我們最終得到依舊是空白節點,而并非后面相鄰兄弟節點。
```javascript
// 判斷獲取的兄弟節點是否為元素節點
if ( nextSibling.nodeType != 1){
nextSibling = nextSibling.nextSibling;
}
```
通過判斷獲取的節點類型是否為元素節點,實現如何獲取真正的后面相鄰兄弟節點。
- 關于
- 第一章 DOM 是什么
- 第一節 DOM 介紹
- 第二節 DOM 樹結構
- 第二章 Document 對象
- 第一節 Document 對象介紹
- 第二節 定位頁面元素
- 第三節 創建頁面元素
- 第三章 Node 對象
- 第一節 Node 對象介紹
- 第二節 判斷節點類型
- 第三節 遍歷節點
- 第四節 插入節點
- 第五節 刪除節點
- 第六節 替換節點
- 第七節 復制節點
- 第八節 textContent 屬性
- 第四章 Element 對象
- 第一節 Element 對象介紹
- 第二節 DOM 元素樹
- 第三節 定位頁面元素
- 第四節 遍歷元素
- 第五節 屬性操作
- 第六節 innerHTML 屬性
- 第五章 樣式操作
- 第一節 獲取內聯樣式
- 第二節 獲取外聯樣式表
- 第三節 獲取 class 屬性
- 第四節 獲取當前有效樣式
- 第五節 設置內聯樣式
- 第六節 設置 class 屬性
- 第七節 Element 對象的樣式屬性
- 第六章 事件
- 第一節 什么是事件
- 第二節 注冊事件
- 第三節 移除注冊事件
- 第四節 Event 事件對象
- 第五節 獲取目標元素
- 第六節 阻止默認行為
- 第七節 獲取鼠標坐標
- 第八節 事件流
- 第九節 事件委托
- 第七章 表單操作
- 第一節 獲取表單
- 第二節 表單操作
- 第三節 表單驗證
- 第四節 表單提交
- 第八章 BOM
- 第一節 BOM 是什么
- 第二節 Window 對象
- 第三節 Navigator 對象
- 第四節 History 對象
- 第五節 Location 對象
- 第六節 定時器