js中兼容性问题的封装（能力检测）

　　所谓兼容性，就是看浏览器是否支持当前对象的属性或是方法，先通过获得页面文本内容的方式来了解兼容性，并封装函数或对象以解决此类问题。

获得页面文本内容的方式：innnerText 或textContent 或innerHTML。

innerText在不同浏览器存在有兼容性问题，为此我们需要封装到一个函数里，使得不同的浏览器及不同版本都能获得页面文本。(谷歌兼容性较好，这里只拿早期火狐版本和IE8及其之前版本作比较)

innerText和innerHTml的具体区别
　　在获取页面文本的时候
1，innerText只会获取到标签之间的文本信息，不会获取到标签；innerHTML是获得标签之前的所有内容，包括标签本身
2，IE8及之前的版本是支持innerText的，早期的火狐浏览器是不支持的，早期的火狐只支持textContent，而IE8不支持；innerHTML是所有浏览器都支持的，不存在兼容性问题
　　

/**
     * innerText  textContent
     * 获得页面标签之间文本内容的兼容性写法
     * @param obj
     * @returns {*}
     */
    function getInnerText(obj) {
        if (obj.innerText) { //IE8及之前的版本支持
            return obj.innerText;
        } else {
            return obj.textContent; //早期的火狐支持
        }
    }

　　在设置页面文本的时候
1，innerText会把设置的文本内容原样输出；文本里即使有html标签，也不会渲染出来（发生了转义）
2，innerHTML会渲染出html标签的，无兼容性问题
　　

/**
     * 设置页面标签之间文本内容的兼容性写法
     * @param obj
     * @param value
     */
    function setInnerText(obj, value) {
        if (obj.innerText) {
            obj.innerText = value;
        } else {
            obj.textContent = value;
        }
    }

　　若有很多此类兼容性问题需要封装，可以统一把它们封装到一个对象里，如下

var txt = {
        getInnerText: function (obj) {
            if (obj.innerText) { //IE8及之前的版本支持
                return obj.innerText;
            } else {
                return obj.textContent; //早期的火狐支持
            }
        },
        setInnerText: function (obj, value) {
            if (obj.innerText) {
                obj.innerText = value;
            } else {
                obj.textContent = value;
            }
        }
    };

 

　　再看一个小例子

　　获得下一个兄弟元素节点的能力检测
nextSibling    chrome,火狐都支持。但是会获得文本节点，IE8及之前版本会忽略空白文本节点
nextElementSibling    chrome,火狐支持，IE8及之前版本不支持

/**
     * 取下一个兄弟元素节点
     * @param element
     * @returns {*}
     */
    function getNextElement(element) {
        if (element.nextElementSibling) {
            return element.nextElementSibling;
        } else {
            var node = element.nextSibling;
            while (node && node.nodeType != 1) {    //文本节点的节点值为1
                node = node.nextSibling;
            }
            return node;
        }
    }

以后的工作和学习中有许多兼容性的问题，多了解封装的思想和方法。