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;
        }
    }

以后的工作和學習中有許多兼容性的問題，多了解封裝的思想和方法。