JS獲取子節點、父節點和兄弟節點的方法例項總結
阿新 • • 發佈：2021-12-27
1.js獲取子節點的方式
1.通過獲取dom方式直接獲取子節點
var a = document.getElementById("test").getElementsByTagName("div");
2.通過children來獲取子節點
利用children來獲取子元素是最方便的，他也會返回出一個數組。對其獲取子元素的訪問只需按陣列的訪問形式即可。
| 1 |
var getFirstChild = document.getElementById("test").children[0];
|
3.通過childNodes獲取子節點
childNodes返回的是子節點的集合，是一個數組的格式。他會把換行和空格也當成是節點資訊。
| 1 |
var b =document.getElementById("test").childNodes;
|
為了不顯示不必須的換行的空格，我們如果要使用childNodes就必須進行必要的過濾。通過正則表示式式取掉不必要的資訊。下面是過濾掉
| 1 2 3 4 5 6 7 8 9 10 11 12 |
//去掉換行的空格
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.獲取第一個子節點
| 1 |
//會匹配換行和空格資訊var getFirstChild = document.getElementById("test").firstChild;
|
| 1 |
//不會匹配換行和空格資訊var getFirstChild = document.getElementById("test").firstElementChild; |
5.獲取最後一個子節點
//lastChild獲取最後一個子節點的方式其實和firstChild是類似的。
| 1 |
//會匹配換行和空格資訊
|
var getLastChildA = document.getElementById("test").lastChild;
| 1 |
<br>//不會匹配換行和空格資訊
|
var getLastChildB = document.getElementById("test").lastElementChild;
2.獲取父節點的方式
1. parentNode獲取父節點
獲取的是當前元素的直接父元素。parentNode是w3c的標準。
2. parentElement獲取父節點
parentElement和parentNode一樣，只是parentElement是ie的標準。
var p1 = document.getElementById("test").parentElement;
3. offsetParent獲取所有父節點
一看offset我們就知道是偏移量 其實這個是於位置有關的上下級 ，直接能夠獲取到所有父親節點， 這個對應的值是body下的所有節點資訊。
3.獲取兄弟節點的方式
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也是類似的。
| 1 2 |
var brother4 = document.getElementById("test").nextElementSibling;
var brother5 = document.getElementById("test").nextSibling;
|