webAPI中关于textContent的兼容性问题

静态页面

<body>
<input type="button" value="设置" id="btn">
<div id="div1">哈哈</div>
</body>

在项目中新建一个名为comment.js文件，并定义一个通过id选择器获取元素的方法。

function my$(id){
    return document.getElementById(id);
}

将comment.js文件引入当前页面中，在此页面中通过id获取元素就可以不用写document.getElementById(“元素id名”)，直接调用my$(“元素id名”)的方法

<script src="comment.js"></script>

<script>
    //innerText  谷歌 火狐 ie都支持
    // my$("btn").onclick=function () {
    // console.log(my$("div1").innerText);
    //textContent  谷歌 火狐 支持 ie8不支持
   // console.log(my$("div1").textContent)
   // my$("div1").textContent="这是改变了的div"
    // }

    //textContent在ie8返回的是undeFined;
    //判断这个属性的值如果是undefined，说明这个浏览器不支持
    
    //兼容代码
    //获取任意标签中间的文本内容，需要返回值
    function getInnerText(elelment) {
        //判断类型
        if (typeof elelment.textContent=="undefind") {
            //不支持
            return elelment.innerText;
        }
        else {
            return elelment.textContent;
        }
    }

    //测试
    my$("btn").onclick=function () {
        console.log(getInnerText(my$("div1")));
    }

  // 设置任意标签中间的文本内容, 需要返回值
    //  形参: 操作的元素,  设置的内容
    //方法一
    function setInnerText(element,text) {
        //判断类型
        // if (typeof elelment.textContent=="undefind") {
        //     //不支持
        //     elelment.innerText=text;
        // }
        // else {
        //     elelment.textContent=text;
        // }

        //方法二..................................................

        if (element.textContent) {
        //如果有值，用textContent设置
            element.textContent=text;
        }
        else {
        //不支持
            element.innerText=text;
        }
    }

    //测试
 my$("btn").onclick=function () {
        console.log(getInnerText(my$("div1")));
        setInnerText(my$("div1"),"哈哈")
    } 

</script>

webAPI中关于textContent的兼容性问题

猜你喜欢