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)     

大概几种方法都给大家封装好了，剩下的估计大家也能明白其中原理吧。