我們?cè)趯?shí)際的開(kāi)發(fā)中，經(jīng)常要獲取頁(yè)面中某個(gè)html元素，動(dòng)態(tài)更新元素的樣式、內(nèi)容屬性等。

 我們已經(jīng)知道在JavaScript中提供下面的方法獲取子、父、兄節(jié)點(diǎn)的方法：

　　常規(guī)

通過(guò)父節(jié)點(diǎn)獲取子節(jié)點(diǎn)：

parentObj.firstChild　　                                          獲取已知父節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)
parentObj.lastChild　　                                          獲取已知父節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)
parentObj.childNodes                                             獲取已知父節(jié)點(diǎn)的子節(jié)點(diǎn)數(shù)組(這里我在IE 7中獲取的是所有直接的子節(jié)點(diǎn))
parentObj.children                                                  獲取已知節(jié)點(diǎn)的直接子節(jié)點(diǎn)數(shù)組（在IE7中和childNodes效果一樣）
parentObj.getElementsByTagName(tagName)     返回已知子節(jié)點(diǎn)中類(lèi)型為指定值的子節(jié)點(diǎn)數(shù)組

通過(guò)臨近節(jié)點(diǎn)獲取兄弟節(jié)點(diǎn)：

neighbourNode.previousSibing                              獲取已知節(jié)點(diǎn)的前一個(gè)兄弟節(jié)點(diǎn)
neighbourNode.nextSibing                                      獲取已知節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)

通過(guò)子節(jié)點(diǎn)獲取父節(jié)點(diǎn)：

　　 1、childNode.parentNode                                             獲取已知節(jié)點(diǎn)的父節(jié)點(diǎn)

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

　　擴(kuò)展

在擴(kuò)展之前，我們需要知道一些關(guān)于節(jié)點(diǎn)基礎(chǔ)的知識(shí)：Dom節(jié)點(diǎn)中，每個(gè)節(jié)點(diǎn)都擁有不同的類(lèi)型

   　 W3C規(guī)范中常用的Dom節(jié)點(diǎn)的類(lèi)型有以下幾種

   關(guān)于節(jié)點(diǎn)的名稱(chēng)，不同類(lèi)型的節(jié)點(diǎn)對(duì)應(yīng)不同的名稱(chēng)

   可以分別通過(guò)nodeType（節(jié)點(diǎn)類(lèi)型），nodeName（節(jié)點(diǎn)名稱(chēng)），以及nodeValue（節(jié)點(diǎn)值）分別返回節(jié)點(diǎn)的類(lèi)型、節(jié)點(diǎn)名稱(chēng)以及節(jié)點(diǎn)值（比如元素節(jié)點(diǎn)返回1，屬性節(jié)點(diǎn)返回2）

JS獲取兄弟節(jié)點(diǎn)的兩種方法

　　方法一：通過(guò)父元素的子元素先找到含自己在內(nèi)的“兄弟元素”，然后在剔除自己

function sibling(elem){
 var a = [];
 var b = elem.parentNode.children;
 for (var i = 0 ; i < b.length ; i++){
  if(b[i] !== elem) a.push(b[i]);
 }
 return a;
}

方法二：jQuery中實(shí)現(xiàn)方法，先通過(guò)查找元素的第一個(gè)子元素，然后在不斷往下找下一個(gè)緊鄰元素，判斷并剔除自己。

siblings:function(elem)
{
  return JQuery.sibling(elem.parentNode.firstNode,elem);
}
JQuery.sibling = function(n,elem){
  var r = [];
  for (;n;n= n.nextSibling){
  if(n.nodeType == 1 && （！elem || elem != elem))
  r.push(n);
 } 
  return r;
}

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

把這個(gè)方法轉(zhuǎn)化為獨(dú)立可用的函數(shù)：

fucntion sibling(elem){
 var r = [];
 var n = elem.parentNode.firstChild;
 for(;n;n = n.nextSibling) {
  if(n.nodeType === 1 && n !== elem) {
   r.push(n);
  }
 } 
  return r;
}

很顯然通過(guò)這種方法查找特定節(jié)點(diǎn)的兄弟元素，可以很方便的避免的使用遞歸的冗余。

獲取所有元素子節(jié)點(diǎn)

　　在JavaScript中，可以通過(guò)children來(lái)獲取所有的子節(jié)點(diǎn)（只返回HTML中，甚至不返回子節(jié)點(diǎn)），幾乎得到了所有瀏覽器的支持，但是在Firefox有的版本中不支持。

　　注意：在IE中，children包含注釋節(jié)點(diǎn)

　　所以因?yàn)樘厥馇闆r的存在，有時(shí)候我們需要只獲取元素節(jié)點(diǎn)，這樣我們就可以通過(guò)nodeType屬性來(lái)進(jìn)行篩選，用上面的知識(shí)：nodeType == 1的節(jié)點(diǎn)為元素節(jié)點(diǎn)。

下面，自定義一個(gè)函數(shù)來(lái)獲取所有的元素子節(jié)點(diǎn)：

var getChildNodes = function(elem) {
 var childArr = elem.children || elem.childNodes, 
   childArrTem = new Array();
  for (var i = 0 ; i < childArr.length; i ++ ) {
   if (childArr[i].nodeType == 1){
   childArrTem.push(childArr[i]); 
  }
 } 
 return childArrTem;
}

獲取所有的父節(jié)點(diǎn)

同樣的，我們可以獲取當(dāng)前節(jié)點(diǎn)所有的父節(jié)點(diǎn)：

function getParents （elem）{
 var parents = [];
 while(elem.parentNode){
  parents.push(elem.parentNode)
  elem = elem.parentNode;
 } 
 return parents;
}

這樣我們可以接受一個(gè)dom節(jié)點(diǎn)，最終會(huì)獲取到document對(duì)象，如果只要獲取到最上層是body，可以把while里的判斷改為：  while（elem.parentNode && elem.parentNode.tagName == 'BODY'

依據(jù)JavaScript中的提供的獲取節(jié)點(diǎn)的方法和相關(guān)的知識(shí)，我們可以寫(xiě)出很多封裝的方法，嘗試一下，你可以寫(xiě)出多少種獲取節(jié)點(diǎn)的方法呢？

當(dāng)我們寫(xiě)出了一些操作節(jié)點(diǎn)的封裝之后在去看jQuery中Dom操作節(jié)點(diǎn)方法的源碼會(huì)輕松很多呢。

總結(jié)

以上所述是小編給大家介紹的JS獲取子、父、兄節(jié)點(diǎn)方法小結(jié)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論