HTML5學堂：今天我們拋開框架，書寫一些DOM操作方面的功能。相信用過JQ的人，絕對不會使用原生DOM進行某些效果的實現。原因很簡單，在原生DOM當中需要處理各種問題——主要是非標籤節點也會成為查詢的內容。今天我們就是用原生實現這樣幾個功能——查詢第一個、最後一個子元素、查詢父級元素、查詢前一個和下一個兄弟級標籤、移除一個元素所有的子元素。也藉助這個過程理解功能的原理。

1、查詢第一個子元素 DOMFirstChild

在進行子元素的查詢時，我們都會想到原生DOM方法中的firstChild，那麼此時我們需要保證查詢到的元素是存在的，同時保證這個元素是一個標籤節點（此處我們只需要檢測節點型別-nodeType），如果不是，那麼我們就在當前標籤狀態下，繼續尋找下一個兄弟級標籤。

ele.nodeType == 1 —— 元素節點

ele.nodeType == 2 —— 屬性節點

ele.nodeType == 3 —— 文字節點

ele.nodeType == 4 —— CDATA區段

ele.nodeType == 5 —— 實體引用

ele.nodeType == 6 —— 實體

ele.nodeType == 7 —— 處理指令

ele.nodeType == 8 —— 註釋節點

ele.nodeType == 9 —— 文件節點

程式碼實現：

/*
* DOM相關操作
* 作者：獨行冰海 - 利利
* 原生DOM指向各種型別，需要處理，令其只指向元素型別
*/
function DOMFirstChild(nowEle){
var targetEle = nowEle.firstChild;
while (targetEle && targetEle.nodeType != 1) {
targetEle = targetEle.nextSibling;
}
return targetEle;
}
 

2、查詢最後一個子元素 DOMLastChild

先使用lastChild尋找到最後一個子元素，然後檢測，如果不是標籤節點，則使用previousSibling向前尋找同級元素。

程式碼實現：

function DOMLastChild(nowEle){
var targetEle = nowEle.lastChild;
while (targetEle && targetEle.nodeType != 1) {
targetEle = targetEle.previousSibling;
}
return targetEle;
}

3、可控層數的父級元素查詢 DOMParent

這個函式的作用與前兩者不同，並非是單純的篩選節點，而是進行了功能擴充，增加了一個引數，讓使用者可以控制查詢父級元素的層數，如直接查詢id名為con的父級的父級元素，在這個函式中也是可以做到的。此處的一個原理在於，每次先對當前元素進行檢測，檢測是否是根節點（即文件節點，nodeType==9），如果不是根節點，那麼使用parentNode進行向上級查詢。此時利用第二個引數構成for迴圈，實現多次的查詢父級。

程式碼實現：

// 操作多層
function DOMParent(nowEle, num) {
var targetEle = nowEle;
var num = num || 1;
for (var i = 0; i < num; i++) {
if (targetEle.nodeType == 9) { // 根節點
break;
} else if (targetEle != null) {
targetEle = targetEle.parentNode;
}
};
return targetEle;
}

在這個程式碼中還進行了一處的優化，即第二句 var num = num || 1，也就是說，程式設計師在查詢一級的父級元素時是可以不傳第二個引數的。

4、前一個兄弟標籤 DOMPre

這個函式功能的原理和最初兩個類似，因此直接上程式碼：

function DOMPre(nowEle) {
var nowEle = nowEle.previousSibling;
while(nowEle && nowEle.nodeType != 1) {
nowEle = nowEle.previousSibling;
}
return nowEle;
}

5、下一個兄弟標籤 DOMNext

這個函式功能的原理和最初兩個類似，因此直接上程式碼：

function DOMNext(nowEle) {
var nowEle = nowEle.nextSibling;
while(nowEle && nowEle.nodeType != 1) {
nowEle = nowEle.nextSibling;
}
return nowEle;
}

6、清空所有子標籤 DOMEmpty

好啦，這個是我們今天最後一個功能函式，清空一個元素中的所有子元素（標籤）。原理很easy，從當前元素的第一個元素開始找，然後就用removeChild，刪啊刪啊刪啊~~~~看程式碼：

function DOMEmpty(nowEle) {
while(nowEle.firstChild) {
nowEle.removeChild(nowEle.firstChild);
}
}