textContent和innerText以及innerHTML的区别

最新推荐文章于 2023-12-15 23:14:09 发布

coodingcc

最新推荐文章于 2023-12-15 23:14:09 发布

阅读量589

点赞数 2

分类专栏：前端文章标签： textContent innerText innerHTML

本文链接：https://blog.csdn.net/cristina_song/article/details/98312833

版权

前端专栏收录该内容

93 篇文章 2 订阅

订阅专栏

<!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 οnclick="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>

1、通过textContent属性可以获取指定节点的文本，以及该指定节点所包含后代节点中文本内容，也包括

小结：textContent、innerText、innerHTML的区别和差异

1 、textContent属性可以获取指定节点的文本及其后代节点中文本内容，也包括

innerText也是获取指定节点的文本及其后代节点中文本内容，但不能获取script和style元素中的内容。
innerHTML是获取HTML文本结构内容。
2、textContent会获取display:none的节点的文本；而innerText好像会感知到节点是否呈现一样，不作返回。
也就是说，textContent能够获取元素的所有子节点上的文本，不管这个节点是否呈现；而innerText只返回呈现到页面上的文本。

参考链接 https://blog.csdn.net/qq_39207948/article/details/86099905
以下是一个原生js修改文本内容的应用
https://www.cnblogs.com/web001/p/8001406.html