innerText和textContent区别以及兼容处理 - ellaha

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box">
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<script>
    var box = document.getElementById('box');
    console.log(box.innerText); //获取内部文本
    console.log(box.textContent); //获取内部文本
    console.log(getInnerText(box));
    // 新版IE、谷歌 两个都支持
    // 新版火狐只支持textContent
    // 旧版IE只支持innerText
    //处理innerText的兼容性问题
    // 如何知道浏览器是否支持某个属性，当属性不存在的时候返回的是undefined，当属性存在的时候返回的是 该属性的类型
    function getInnerText(e) {

        // 判断当前浏览器是否支持元素的innerText属性
        //如果不支持innerText 就使用e.textContent获取内容
        if(typeof e.innerHTML === 'string'){
            return e.innerHTML;
        }else{
            return e.innerText;
        }
    }

</script>
</body>
</html>

posted on 2021-03-15 20:52 ellaha 阅读(112) 评论(0) 收藏举报

刷新页面返回顶部