textContent和innerText以及innerHTML的区别

最新推荐文章于 2022-08-24 10:45:02 发布

stone_ui

最新推荐文章于 2022-08-24 10:45:02 发布

阅读量474

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/stone_ui/article/details/123363677

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <style>
        button{
            border:1px solid red;
        }
    </style>
    <div class="contain">
        北京上海广州<span>深圳厦门</span>陕西西安
        <p>台湾香港澳门</p>
    </div>
    <button onclick="myFunction()">我是按钮</button>
    <script>
        function myFunction(){
            console.log(event.type);
        }
        let container = document.querySelector("body");
        console.log("textContent的内容是:",container.textContent);
        console.log("innerText的内容是:",container.innerText);
        console.log("innerHTML的内容是:",container.innerHTML);
    </script>
</body>
</html>

<!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 可以抓到 display: none 的节点但 innerText 不能

小结：textContent、innerText、innerHTML的区别和差异
1 、textContent属性可以获取指定节点的文本及其后代节点中文本内容，也包括<script>和<style>元素中的内容；

innerText也是获取指定节点的文本及其后代节点中文本内容，但不能获取<script>和<style>元素中的内容。

innerHTML是获取HTML文本结构内容。

2、textContent会获取display:none的节点的文本；而innerText好像会感知到节点是否呈现一样，不作返回。

也就是说，textContent能够获取元素的所有子节点上的文本，不管这个节点是否呈现；而innerText只返回呈现到页面上的文本。

3、要注意设置文本时被替换的可不只是文本了；这时textContent 、innerText属性相当于innerHTML属性，会把指定节点下的所有子节点也一并替换掉。

4、由于 innerText 受 CSS 样式的影响，它会触发重排（reflow），但 textContent 不会。

stone_ui

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
textContent和innerText以及innerHTML的区别

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <style> button{ border:1px solid red; } </style>.
复制链接

扫一扫