JS獲取子、父、兄節點方法小結

這篇文章主要介紹了JS獲取子、父、兄節點方法總結及JS獲取兄弟節點的兩種方法,對JS的朋友可以參考下本篇文章

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

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

　　

##常規

透過父節取得子點：

parentObj.firstChild　　                    取得已知父節的第一個子節點

parentObj.lastChild　　                   節點的最後一個子節點

parentObj.childNodes                           7中取得的是所有直接的子節點)

parentObj.children                         的直接子節點數組（在IE7中和childNodes效果一樣）

parentObj.getElementsByTagName(tagName)     返回已知子節點中類型為指定值的子節點數組透過臨近節點獲取兄弟節點中類型為指定值的子節點數組

透過臨近節點獲取兄弟教材：

neighbourNode.previousSibing                                                   所使用已知節點的下一個兄弟節點

#使用父節點：

　　 1、childNode.parentNode                            基本上都是可以遞歸是使用的，parentObj.firstChild.firstChild.firstChild...但是這樣的程式碼有一種傻傻的趕腳。 。 ######　　######擴充############在擴充功能之前，我們需要知道一些關於節點基礎的知識：Dom節點中，每個節點都有不同的類型######   　 W3C規格中常用的Dom節點的型別有下列幾種#############文檔節點表示整個文件（Dom樹的根節點，即document）9##

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

節點類型	說明	值
	元素節點###每一個###HTML標籤###都是一個元素節點	1
屬性節點	#元素節點（HTML標籤）的屬性，如id，class，name等	2
文字節點	元素節點或屬性節點中的文字內容	3
註釋節點	便是文檔的註釋，形式如	8

# #文檔節點它的值永遠都是#document#

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

JS取得兄弟節點的兩個方法

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

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中實現方法，先透過找出元素的第一個子元素，然後在不斷往下找下一個緊鄰元素，判斷並剔除自己。

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行可以找到這段程式碼:

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

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;
}

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

取得所有元素子節點

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

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

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

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

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;
}

取得所有的父節點

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

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

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

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

節點方法的原始碼會輕鬆很多呢。

##JavaScript外掛Tab選項卡詳解

JavaScript函數綁定用法解析

#

節點類型	節點名稱
元素節點	#HTML的名稱（大寫）
屬性節點	屬性的名稱
文字節點	#它的值永遠的都#text

以上是JS獲取子、父、兄節點方法小結的詳細內容。更多資訊請關注PHP中文網其他相關文章！