本文實(shí)例講述了JS獲取子節(jié)點(diǎn)、父節(jié)點(diǎn)和兄弟節(jié)點(diǎn)的方法。分享給大家供大家參考，具體如下：

一、js獲取子節(jié)點(diǎn)的方式

1. 通過獲取dom方式直接獲取子節(jié)點(diǎn)

其中test的父標(biāo)簽id的值，div為標(biāo)簽的名字。getElementsByTagName是一個方法。返回的是一個數(shù)組。在訪問的時候要按數(shù)組的形式訪問。

var a = document.getElementById("test").getElementsByTagName("div");

2. 通過childNodes獲取子節(jié)點(diǎn)

使用childNodes獲取子節(jié)點(diǎn)的時候，childNodes返回的是子節(jié)點(diǎn)的集合，是一個數(shù)組的格式。他會把換行和空格也當(dāng)成是節(jié)點(diǎn)信息。

var b =document.getElementById("test").childNodes;

為了不顯示不必須的換行的空格，我們?nèi)绻褂胏hildNodes就必須進(jìn)行必要的過濾。通過正則表達(dá)式式取掉不必要的信息。下面是過濾掉

//去掉換行的空格
for(var i=0; i<b.length;i++){
  if(b[i].nodeName == "#text" && !/\s/.test(b.nodeValue)){
    document.getElementById("test").removeChild(b[i]);
  }
}
//打印測試
for(var i=0;i<b.length;i++){
  console.log(i+"---------")
  console.log(b[i]);
}
//補(bǔ)充 document.getElementById("test").childElementCount; 可以直接獲取長度 同length

4. 通過children來獲取子節(jié)點(diǎn)

利用children來獲取子元素是最方便的，他也會返回出一個數(shù)組。對其獲取子元素的訪問只需按數(shù)組的訪問形式即可。

var getFirstChild = document.getElementById("test").children[0];

5. 獲取第一個子節(jié)點(diǎn)

firstChild來獲取第一個子元素，但是在有些情況下我們打印的時候會顯示undefined，這是什么情況呢？？其實(shí)firstChild和childNodes是一樣的，在瀏覽器解析的時候會把他當(dāng)換行和空格一起解析，其實(shí)你獲取的是第一個子節(jié)點(diǎn)，只是這個子節(jié)點(diǎn)是一個換行或者是一個空格而已。那么不要忘記和childNodes一樣處理呀。

var getFirstChild = document.getElementById("test").firstChild;

6. firstElementChild獲取第一個子節(jié)點(diǎn)

使用firstElementChild來獲取第一個子元素的時候，這就沒有firstChild的那種情況了。會獲取到父元素第一個子元素的節(jié)點(diǎn) 這樣就能直接顯示出來文本信息了。他并不會匹配換行和空格信息。

var getFirstChild = document.getElementById("test").firstElementChild;

7. 獲取最后一個子節(jié)點(diǎn)

lastChild獲取最后一個子節(jié)點(diǎn)的方式其實(shí)和firstChild是類似的。同樣的lastElementChild和firstElementChild也是一樣的。不再贅余。

var getLastChildA = document.getElementById("test").lastChild;
var getLastChildB = document.getElementById("test").lastElementChild;

二、js獲取父節(jié)點(diǎn)的方式

1. parentNode獲取父節(jié)點(diǎn)

獲取的是當(dāng)前元素的直接父元素。parentNode是w3c的標(biāo)準(zhǔn)。

var p = document.getElementById("test").parentNode;

2. parentElement獲取父節(jié)點(diǎn)

parentElement和parentNode一樣，只是parentElement是ie的標(biāo)準(zhǔn)。

var p1 = document.getElementById("test").parentElement;

3. offsetParent獲取所有父節(jié)點(diǎn)

一看offset我們就知道是偏移量 其實(shí)這個是于位置有關(guān)的上下級 ，直接能夠獲取到所有父親節(jié)點(diǎn)， 這個對應(yīng)的值是body下的所有節(jié)點(diǎn)信息。

var p2 = document.getElementById("test").offsetParent;

三、js獲取兄弟節(jié)點(diǎn)的方式

1. 通過獲取父親節(jié)點(diǎn)再獲取子節(jié)點(diǎn)來獲取兄弟節(jié)點(diǎn)

var brother1 = document.getElementById("test").parentNode.children[1];

2. 獲取上一個兄弟節(jié)點(diǎn)

在獲取前一個兄弟節(jié)點(diǎn)的時候可以使用previousSibling和previousElementSibling。他們的區(qū)別是previousSibling會匹配字符，包括換行和空格，而不是節(jié)點(diǎn)。previousElementSibling則直接匹配節(jié)點(diǎn)。

var brother2 = document.getElementById("test").previousElementSibling;
var brother3 = document.getElementById("test").previousSibling;

3. 獲取下一個兄弟節(jié)點(diǎn)

同previousSibling和previousElementSibling，nextSibling和nextElementSibling也是類似的。

var brother4 = document.getElementById("test").nextElementSibling;
var brother5 = document.getElementById("test").nextSibling;

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。

最新評論