特別宣告：文章轉自點選開啟連結

一、js獲取子節點的方式

1.通過獲取dom方式直接獲取子節點

其中test的父標籤id的值，div為標籤的名字。getElementsByTagName是一個方法。返回的是一個數組。在訪問的時候要按陣列的形式訪問。

• 1

2.通過childNodes獲取子節點

使用childNodes獲取子節點的時候，childNodes返回的是子節點的集合，是一個數組的格式。他會把換行和空格也當成是節點資訊。

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

為了不顯示不必須的換行的空格，我們如果要使用childNodes就必須進行必要的過濾。通過正則表示式式取掉不必要的資訊。下面是過濾掉//補充 document.getElementById("test").childElementCount; 可以直接獲取長度 同lengt

//去掉換行的空格
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]);
}
 

4.通過children來獲取子節點

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

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

5.獲取第一個子節點

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

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

6.firstElementChild獲取第一個子節點

使用firstElementChild來獲取第一個子元素的時候，這就沒有firstChild的那種情況了。會獲取到父元素第一個子元素的節點 這樣就能直接顯示出來文字資訊了。他並不會匹配換行和空格資訊。

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

7.獲取最後一個子節點

lastChild獲取最後一個子節點的方式其實和firstChild是類似的。同樣的lastElementChild和firstElementChild也是一樣的。不再贅餘。

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

二、js獲取父節點的方式

1.parentNode獲取父節點

獲取的是當前元素的直接父元素。parentNode是w3c的標準。

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

2.parentElement獲取父節點

parentElement和parentNode一樣，只是parentElement是ie的標準。

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

3.offsetParent獲取所有父節點

一看offset我們就知道是偏移量 其實這個是於位置有關的上下級 ，直接能夠獲取到所有父親節點， 這個對應的值是body下的所有節點資訊。

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

三、js獲取兄弟節點的方式

1.通過獲取父親節點再獲取子節點來獲取兄弟節點

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

2.獲取上一個兄弟節點

在獲取前一個兄弟節點的時候可以使用previousSibling和previousElementSibling。他們的區別是previousSibling會匹配字元，包括換行和空格，而不是節點。previousElementSibling則直接匹配節點。

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

3.獲取下一個兄弟節點

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

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