js中本身封裝一個IE8兼容的方法 去獲取節點

使用nodeType判斷某個節點是否是元素節點

先給你們簡單介紹一下，查找節點的幾種方法

var box=document.getElementsByClassName('box')[0];
console.dir(box);

console.log(box.parentNode) ;//指的就是box的父節點
console.log(box.childNodes) ;//box的全部子節點。
console.log(box.children) ;//全部元素子節點，不兼容IE8

console.log(box.previousSibling)//box的哥哥節點（就是上個節點）若是哥哥節點不存在，返回值爲null
console.log(box.previousElementSibling)//box哥哥元素節點，若不存在返回值爲null

console.log(box.nextSibling)//box的弟弟節點
console.log(box.nextElementSibling)//box弟弟元素節點
複製代碼

本身封裝一個IE8兼容的方法，能夠獲取哥哥節點

function getBroEle(ele) {
    // 獲取ele的哥哥節點，而後判斷是不是元素節點，不是的話，接着向上查找
    var bro = ele.previousSibling;
    while(bro && bro.nodeType !== 1 ){
        // 哥哥節點存在，而且不是元素節點,緊接着像上查找
        bro =bro.previousSibling;
    }
    return bro;
}
var res2=getBroEle(box);
console.log(res2)
複製代碼

本身封裝一個IE8兼容的方法，能夠獲取弟弟節點(同哥哥節點)

function getBroEle(ele) {
    // 獲取ele的弟弟節點，而後判斷是不是元素節點，不是的話，接着向上查找
    var bro = ele.nextSibling;
    while(bro && bro.nodeType !== 1 ){
        // 哥哥節點存在，而且不是元素節點,緊接着像上查找
        bro =bro.nextSibling;
    }
    return bro;
}
var res3=getBroEle(box);
console.log(res3)    
複製代碼

本身封裝一個方法，能夠獲取某個元素下的全部元素子節點

function getChildren(ele){
    // 從childNodes中篩選出元素子節點便可
    var ary=[];
    for(var i=0;i<ele.childNodes.length;i++){
        if(ele.childNodes[i].nodeType == 1 ){
            ary.push(ele.childNodes[i])
        }
    }
    return ary;
}
var res =getChildren(box);
console.log(res)     
複製代碼

大概幾種方法都給你們封裝好了，剩下的估計你們也能明白其中原理吧。