本文實(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是一個(gè)方法。返回的是一個(gè)數(shù)組。在訪問的時(shí)候要按數(shù)組的形式訪問。

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

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

使用childNodes獲取子節(jié)點(diǎn)的時(shí)候，childNodes返回的是子節(jié)點(diǎn)的集合，是一個(gè)數(shù)組的格式。他會(huì)把換行和空格也當(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來獲取子元素是最方便的，他也會(huì)返回出一個(gè)數(shù)組。對其獲取子元素的訪問只需按數(shù)組的訪問形式即可。

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

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

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

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

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

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

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

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

lastChild獲取最后一個(gè)子節(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)