JS獲取子節點、父節點和兄弟節點的方法實例總結

1.js獲取子節點的方式

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

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

 2.經過children來獲取子節點

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

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

3.經過childNodes獲取子節點

childNodes返回的是子節點的集合，是一個數組的格式。他會把換行和空格也當成是節點信息。

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

　爲了避免顯示沒必要須的換行的空格，咱們若是要使用childNodes就必須進行必要的過濾。經過正則表達式式取掉沒必要要的信息。下面是過濾掉

//去掉換行的空格
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]);
}
//補充 document.getElementById("test").childElementCount; 能夠直接獲取長度 同length

　　

4.獲取第一個子節點　

//會匹配換行和空格信息
var getFirstChild = document.getElementById("test").firstChild; 

　　

//不會匹配換行和空格信息
var getFirstChild = document.getElementById("test").firstElementChild; 

5.獲取最後一個子節點

 

//lastChild獲取最後一個子節點的方式其實和firstChild是相似的。

//會匹配換行和空格信息

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

//不會匹配換行和空格信息

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

 

 

2.獲取父節點的方式

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;

 

3.獲取兄弟節點的方式

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

 varbrother1 = 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; 

　

$('#id').siblings() 當前元素全部的兄弟節點$('#id').prev() 當前元素前一個兄弟節點$('#id').prevaAll() 當前元素以前全部的兄弟節點$('#id').next() 當前元素以後第一個兄弟節點$('#id').nextAll() 當前元素以後全部的兄弟節點