我們在實際的開發中，經常要獲取頁面中某個html元素，動態更新元素的樣式、內容屬性等。

我們已經知道在JavaScript中提供下面的方法獲取子、父、兄節點的方法：

常規

通過父節點獲取子節點：

1. parentObj.

   firstChild

   獲取已知父節點的第一個子節點
2. parentObj.

   lastChild

   獲取已知父節點的最後一個子節點
3. parentObj.

   childNodes

   獲取已知父節點的子節點數組(這裡我在IE 7中獲取的是所有直接的子節點)
4. parentObj.

   children

   獲取已知節點的直接子節點數組（在IE7中和childNodes效果一樣）

5. parentObj.

   getElementsByTagName(tagName)

   返回已知子節點中類型為指定值的子節點數組

通過臨近節點獲取兄弟節點：

1. neighbourNode.

   previousSibing

   獲取已知節點的前一個兄弟節點
2. neighbourNode.

   nextSibing

   獲取已知節點的下一個兄弟節點

通過子節點獲取父節點：

1、childNode.parentNode獲取已知節點的父節點

上面的方法基本都是可以遞歸是使用的，parentObj.firstChild.firstChild.firstChild...但是這樣的代碼有一種傻傻的趕腳。。

擴展

在擴展之前，我們需要知道一些關於節點基礎的知識：Dom節點中，每個節點都擁有不同的類型

W3C規範中常用的Dom節點的類型有以下幾種

關於節點的名稱，不同類型的節點對應不同的名稱

可以分別通過nodeType（節點類型），nodeName（節點名稱），以及nodeValue（節點值）分別返回節點的類型、節點名稱以及節點值（比如元素節點返回1，屬性節點返回2）

方法一：通過父元素的子元素先找到含自己在內的「兄弟元素」，然後在剔除自己

1 function sibling(elem){
2 var a = ;
3 var b = elem.parentNode.children;
4 for (var i = 0 ; i < b.length ; i++){
5 if(b[i] !== elem) a.push(b[i]);
6 }
7 return a;
8 }

方法二：jQuery中實現方法，先通過查找元素的第一個子元素，然後在不斷往下找下一個緊鄰元素，判斷並剔除自己。

1 siblings:function(elem)
2 {
3 return JQuery.sibling(elem.parentNode.firstNode,elem);
4 }
5
6 JQuery.sibling = function(n,elem){
7 var r = ;
8 for (;n;n= n.nextSibling){
9 if(n.nodeType == 1 && （！elem || elem != elem))
10 r.push(n);
11 }
12 return r;
13 }

在jQuery 1.2多的版本中都可以找到這段代碼，我看的jQuery1.2.3的版本，在1800行可以找到這段代碼:

把這個方法轉化為獨立可用的函數：

1 fucntion sibling(elem){
2 var r = ;
3 var n = elem.parentNode.firstChild;
4 for(;n;n = n.nextSibling) {
5 if(n.nodeType === 1 && n !== elem) {
6 r.push(n);
7 }
8 }
9 return r;
10 }

很顯然通過這種方法查找特定節點的兄弟元素，可以很方便的避免的使用遞歸的冗餘。

在JavaScript中，可以通過children來獲取所有的子節點（只返回HTML中，甚至不返回子節點），幾乎得到了所有瀏覽器的支持，但是在Firefox有的版本中不支持。

注意：在IE中，children包含注釋節點

所以因為特殊情況的存在，有時候我們需要只獲取元素節點，這樣我們就可以通過nodeType屬性來進行篩選，用上面的知識：nodeType == 1的節點為元素節點。

下面，自定義一個函數來獲取所有的元素子節點：

1 var getChildNodes = function(elem) {
2 var childArr = elem.children || elem.childNodes,
3 childArrTem = new Array;
4 for (var i = 0 ; i < childArr.length; i ++ ) {
5 if (childArr[i].nodeType == 1){
6 childArrTem.push(childArr[i]);
7 }
8 }
9 return childArrTem;
10 }

獲取所有的父節點

同樣的，我們可以獲取當前節點所有的父節點：

1 function getParents （elem）{
2 var parents = ;
3 while(elem.parentNode){
4 parents.push(elem.parentNode)
5 elem = elem.parentNode;
6 }
7 return parents;
8 }

這樣我們可以接受一個dom節點，最終會獲取到document對象，如果只要獲取到最上層是body，可以把while里的判斷改為： while（elem.parentNode && elem.parentNode.tagName == "BODY"

依據JavaScript中的提供的獲取節點的方法和相關的知識，我們可以寫出很多封裝的方法，嘗試一下，你可以寫出多少種獲取節點的方法呢？

當我們寫出了一些操作節點的封裝之後在去看jQuery中Dom操作節點方法的源碼會輕鬆很多呢。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！