textContent和innerText属性的区别

来源：互联网发布：怎么成为数据库管理员编辑：程序博客网时间：2024/05/17 04:42

实例1：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">            <title>            </title>        </meta>    </head>    <body>        <div class="test" id="test">            test            <div style="display:none">                <span>                    test                </span>            </div>            <style>                hi            </style>        </div>        <script type="text/javascript">            var testDiv = document.getElementById('test');        console.log("我是textContent输出的"+testDiv.textContent);        console.log("我是innerText输出的"+testDiv.innerText);        </script>    </body></html>

输出的结果：

我是textContent输出的testtesthi我是innerText输出的test

1.主要差异
- textContent 会获取style= “display:none” 中的文本，而innerText不会
- textContent 会获取style标签里面的文本，而innerText

实例2：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">            <title>            </title>        </meta>    </head>    <body>        <div class="test" id="test">            test            <div style="display:none">                <span>                    test                </span>            </div>            <p>                hi            </p>        </div>        <script type="text/javascript">        var testDiv = document.getElementById('test');        console.log("我是textContent输出的"+testDiv.textContent);        console.log("我是innerText输出的"+testDiv.innerText);        </script>    </body></html>

输出结果：

我是textContent输出的            test                    test                hi我是innerText输出的testhi

差异：
1. textContent不会理会html格式，直接输出不换行的文本
2. innerText会根据标签里面的元素独立一行

3.兼容性：
innerText 对IE的兼容性较好
textContent虽然作为标准方法但是只支持IE8+以上的浏览器
最新的浏览器，两个都可以使用

阅读全文

0 0