JavaScript 学习-33.HTML DOM 获取和修改文本节点( textContent，innerText 和 innerHTML)

2022-05-29 12:31:16 阅读：200 来源： 互联网

标签：console DOM 33 标签 textContent innerText div 文本

前言

textContent、innerText 和 innerHTML 三个方法的使用场景和区别

textContent 和 innerText

IE 浏览器最早引入了innerText，虽然是IE浏览器私有属性，但是其他很多浏览器也支持了。提到IE，必然是坑！
火狐浏览器把innerText换成了textContent , 但其他浏览器上面,也是可以使用textContent。

使用区别：
textContent 用来设置或获取某个元素内所有文本内容，包含子元素内容，隐藏元素也能获取。
innerText 的返回值会被格式化 ,但是textContent的返回值不会被格式化
innerText会把页面里的空标签当作换行处理, ( 一个空标签是一行 , 连续的多个空标签也是一行) ,但是textContent就返回一行文本(有子标签才会返回多行文本) .
最重要的区别 innerText返回的值, 依赖于页面的显示. textContent依赖于代码的内容

示例：获取p标签文本内容

<div id="demo">
    <p id="p1">这是文本内容</p>
    hello world！
</div>
<script>
    // p标签
    p1 = document.getElementById('p1');
    console.log("这是textContent：\n" + p1.textContent);
    console.log("这是innerText：\n" + p1.innerText);
</script>

获取div标签文本内容（包含子元素文本内容）

<div id="demo">
    <p id="p1">这是文本内容</p>
    hello world！
</div>
<script>
    // p标签
    div = document.getElementById('demo');
    console.log("这是textContent：\n" + div.textContent);
    console.log("这是innerText：\n" + div.innerText);
</script>

innerText 无法获取子元素p标签隐藏元素， innerText依赖于页面的显示. textContent依赖于代码的内容

<div id="demo">
    <p id="p1" style="display:none;">这是文本内容</p>
    hello world！
</div>
<script>
    // p标签
    div = document.getElementById('demo');
    console.log("这是textContent：\n" + div.textContent);
    console.log("这是innerText：\n" + div.innerText);
</script>

但是直接定位p标签，又能获取子元素文本

<div id="demo">
    <p id="p1" style="display:none;">这是文本内容</p>
    hello world！
</div>
<script>
    // p标签
    p = document.getElementById('p1');
    console.log("这是textContent：\n" + p.textContent);
    console.log("这是innerText：\n" + p.innerText);
</script>

innerText 和 innerHTML

获取内容时
innerHTML 从对象的起始位置到终止位置的全部内容，还包括 HTML 标签。
innerText 会去掉标签的内容。

innerText和innerHTML 获取内容示例

<div id="demo">
    <p id="p1"><strong>这是文本内容</strong></p>
    hello world！
</div>
<script>
    // 获取文本
    p = document.getElementById('p1');
    console.log(p.innerText);  // 这是文本内容
    console.log(p.innerHTML);  // <strong>这是文本内容</strong>
</script>

innerText和innerHTML 有换行和空格示例

<div>
    <p id="p2">hello       world!
        你好世界！
    </p>
</div>
<script>
    // 获取文本
    p = document.getElementById('p2');
    console.log(p.innerText);  // hello world! 你好世界！
    console.log(p.innerHTML);  //
</script>

获取div标签内容

<div id="demo">
    <p id="p1"><strong>这是文本内容</strong></p>
    hello world！
</div>
<script>
    // 获取文本
    div = document.getElementById('demo');
    console.log(div.innerText);  //
    console.log(div.innerHTML);  //
</script>

div.innerHTML 获取的是div下的全部html代码内容
div.innerText 仅仅只获取文本内容

innerText和innerHTML设置内容时：

innerText不会识别html样式
innerHTML会识别html样式

设置内容示例

<div>
    <p id="p3"></p>
    <p id="p4"></p>
</div>
<script>
    // 设置文本
    p3 = document.getElementById('p3');
    p3.innerText = '<strong>hello world</strong>'
    p4 = document.getElementById('p4');
    p4.innerHTML = '<strong>hello world</strong>'
</script>

innerText设置标签内容,是没有标签的效果的
innerHTML设置新的html标签内容,是有标签效果的

标签：console,DOM,33,标签,textContent,innerText,div,文本
来源： https://www.cnblogs.com/yoyoketang/p/16323600.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JavaScript 学习-33.HTML DOM 获取和修改文本节点( textContent，innerText 和 innerHTML)

前言

textContent 和 innerText

innerText 和 innerHTML