js DOM操作的兼容性封装-CSDN博客

本文链接：https://blog.csdn.net/qq_42079388/article/details/104926701

DOM操作的兼容性封装

什么是兼容性

所谓兼容性，就是看浏览器是否支持当前对象的属性或是方法，先通过获得页面文本内容的方式来了解兼容性，并封装函数或对象以解决此类问题。
获得页面文本内容的方式：innnerText 或textContent 或innerHTML。
innerText在不同浏览器存在有兼容性问题，为此我们需要封装到一个函数里，使得不同的浏览器及不同版本都能获得页面文本。(谷歌兼容性较好，这里只拿早期火狐版本和IE8及其之前版本作比较)

innerText和innerHTml的具体区别
　　在获取页面文本的时候

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

兼容性封装实际案例1

html部分

<body>
    <div id="box">我是个div
        <p>我是一个p标签</p>
</body>

获取获取元素文本内容的封装

var box = document.getElementById("box");//获取页面中的 id 为 box 的元素
console.log(box.innerText);//打印出 box 元素的文本信息 火狐42之前的版本不支持 所以是undefined
console.log(box.textContent);//打印出 box 元素的文本信息 IE8及其之前的版本不支持 所以是undefined
//下面做兼容性封装
function hqwb(){
    //如果 box的innerText属性的数据类型为 undefined 由此可判断是火狐42之前的版本
    if(typeof(box.innerText) == "undefined"){
        //则返回 box 的textContent属性
        return box.textContent;
    }else{
        //否则（就是IE8及以前的版本）返回 box 的innerText属性
        return box.innerText;
    }
}
alert(hqwb())

设置元素文本内容的封装

//设置元素文本的封装和 获取 一样 只是加上了 重新赋值 步骤
var box = document.getElementById("box");
console.log(box.innerText);
console.log(box.textContent);
function szys(){
    if(typeof(box.innerText) == "undefined"){
        return box.textContent="我是新的元素";
    }else{
        return box.innerText="我是新的元素";
    }
}
alert(szys())

兼容性封装实际案例2

<body>
    <ul id="ul">
        wwwwww
        <!-- 我是注释 -->
        <li>我是li标签1</li>
        <li id="li2">我是li标签2</li>
        <li>我是li标签3</li>
        <li>我是li标签4</li>
        <li>我是li标签5</li>
    </ul>
<body>

获取第一个子元素的兼容型封装

function firstElement(ele) {
    if (ele.firstElementChild) {//谷歌和火狐
        return ele.firstElementChild;
    }
    else {//IE8以下
        var node = ele.firstChild;
        while (node != null && node.nodeType != 1) {
            node = node.nextSibling;
        }
        return node;
    }
}
console.log(firstElement(ul))

获取下一个元素的兼容性封装

function nextSibling(ele) {
    if (ele.nextElementSibling) {//谷歌火狐
        return ele.nextElementSibling;
    } else { //IE8
        var node = ele.nextSibling;
        while (node != null && node.nodeType != 1) {
            node = node.nextSibling
        }
        return node;

    }
}
console.log(nextSibling(li2));