innerText与textContent区别

最新推荐文章于 2024-01-14 21:42:45 发布

香格里拉&

最新推荐文章于 2024-01-14 21:42:45 发布

阅读量186

点赞数

分类专栏： JavaScript 文章标签： html5 javascript

本文链接：https://blog.csdn.net/Amor__xiaowang/article/details/103971065

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<div id="box">
    我是一个box
    <b>hello</b>
</div>
<script>
    // innerText  最早出现在IE浏览器中
    // 
    // 浏览器兼容问题
    // 
    // 老版本的firefox浏览器不支持innerText
    // 2016的时候 已经把innerText 在DOM中规定为正式的标准属性
    // 
    // textContent

    var box = document.getElementById('box');
    // 都会把标签过滤
    // 前后的空白和一些换行去掉
    console.log(box.innerText);
    // 原封不动的把内容输出,但是会有换行
    console.log(box.textContent);
</script>

在这里插入图片描述

处理兼容性问题

<body>
<div id="box">
    hello
</div>
</body>
<script>
/* 如何知道浏览器是否支持元素的某个特性 */
var box = document.getElementById('box');

/* 当属性不存在的时候, 返回的是undefined */
//console.log(typeof box.a);
/* 当属性存在的时候,返回的是该属性的类型  */
//console.log(typeof box.id);

console.log(getInnerText(box));

function getInnerText(element) {
    /* 判断当前的浏览器是否支持innerText属性 */
    if (typeof element.innerText === 'string') {
        return element.innerText;
    } else {
        /* 如果不支持,就是用innerContent获取内容 */
        return element.innerContent;
    }
}
box.innerHTML = 'hello world!';  //不推荐使用innerHtml 输出纯文本,推荐 innerText