Dom方法兼容

innerText兼容写法

• 获取文本

function getInnerText(element) {
        // 能力检测 判断是否有这一属性
    if (typeof element.innerText === "string") {
        return element.innerText;
    } else {
        return element.textContent;
    }
}

• 设置文本

function setInnerText(element, content) {
        // 能力检测 判断是否有这一属性
    if (typeof element.innerText === "string") {
        element.innerText = content;
    } else {
        element.textContent = content;
    }
}

获取上一个&下一个兄弟元素的兼容写法

• 获取上一个兄弟元素兼容写法

function getPreviousElement(element){
    if(element.previousElementSibling){
        return element.previousElementSibling;
    }else{
        var previous = element.previousSibling;
        while(previous&&previous.nodeType !== 1){
            previous = element.previousSibling;
        }
        return previous;
    }
}

• 获取下一个兄弟元素兼容写法

function getNextElement(element){
    if(element.nextElementSibling){
        //能找到nextElementSibling这个属性 就可以直接使用
        return element.nextElementSibling;
    }else{
        var next = element.nextSibling;// 获取下一个兄弟节点
        // 如果next就是想要的下一个兄弟元素 就直接返回 如果不是 就一直找
        while(next&&next.nodeType !==1){//next找到了而且不是想要的元素节点就继续找
            next = next.nextSibling;
        }
        return next;
    }
}

获取第一个子元素&最后一个子元素的兼容写法

• 获取第一个子元素兼容写法

function getFirstElement(element){
    // 判断是否支持这一写法
    if(element.firstElementChild){
        return element.firstElementChild;
    }else{
        // 先找到第一个节点
        var first = element.firstChild;
        // 如果这个节点存在而且这个节点不是元素节点
        while(first&&first.nodeType !== 1){
            // 从这个节点向后继续找下一个兄弟节点
            first = first.nextSibling;
        }
        return first;
    }
}

• 获取最后一个子元素兼容写法

function getLastElement(element){
    // 判断是否支持这一写法
    if(element.lastElementChild){
        return element.lastElementChild;
    }else{
        // 先找到最后一个个节点
        var last = element.lastChild;
        // 如果这个节点存在而且这个节点不是元素节点
        while(last&&last.nodeType !== 1){
            // 从这个节点向前继续找上一个兄弟节点
            last = last.previousSibling;
        }
        return last;
    }
}

通过类名获取元素对象的兼容方法

function getElementByClassName(element,className){
    if(element.getElementByClassName){// 可以使用这个属性
        return element.getElementByClassName("className");
    }else{
        // 先找到element里面所有的标签 然后判断是否有需要的类名
        // 如果有 就把这些标签放到一个集合中 最后返回这个集合
        var elements = element.getElementByTagName("*"); // 通配符找到所有标签
        var filterArr = [];
        for(var i = 0;i<elements.length;i++){
            if(elements[i].className.indexOf(className)!== -1){
                filter.push(elements[i]);
            } 
        }
        return filterArr;
    }
}