HTML 之textContent、innerText、innerHTML、nodeValue之间的区别

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

清风木子云

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

阅读量964

点赞数

分类专栏： JavaScript HTML 前端文章标签： html5 前端

本文链接：https://blog.csdn.net/qq_41311259/article/details/119103435

版权

前端同时被 3 个专栏收录

20 篇文章 2 订阅

订阅专栏

JavaScript

13 篇文章 1 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

textContent

textContent 属性设置或者返回指定节点的文本内容。如果设置了textContent属性，任何子节点都会被移除，然后被指定的字符串的文本节点替换。
注意：某些时候textContent属性可以被nodeValue属性替代，但是这个属性可以返回子节点的文本。

//获取所有列表的文本内容：
document.getElementById("myList").textContent;
//结果：CoffeeTea，提取了所有子节点的文本内容，并且无空格的并列显示

innerText

InnerText返回标记内文本的值，不包括html标记，是指从源文件的开始到结束的内容，但是它删除了Html标记。也就是获取或设置指定元素标签内的文本值，从该元素标签的起始位置到终止位置的全部文本内容(不包含html标签)。
注意：所有浏览器都支持innerHTML，Internetexplorer和chrome支持innerText，而Firefox不支持。innerHTML是W3C规定的属性；innerText属性是IE浏览器自己的属性，但是以后的浏览器只部分实现了这个属性。

//获取所有列表的文本内容：
document.getElementById("myList).innerText;
//结果：Coffee Tea
//提取了所有节点的文本内容，并且list不同元素的文本内容之间加空格
document.getElementById("mydemo").innerText = "<span>你好</span>"
//显示标签，标签无效：<a>你好</a>
document.getElementById("mydemo").innerHTML = "<span>你好</span>"
//不显示标签，标签被解析：你好

innerHTML

innerHTMLinnerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML，可获取或设置指定元素标签内的 html内容，从该元素标签的起始位置到终止位置的全部内容(包含html标签)。

//获取所有列表的文本内容：
document.getElementById("myList").innerHTML;
//结果：
 - Coffee
 - Tea 
//提取了该节点的html内容，并且将html内容解析之后带样式显示

nodeValue

nodeValue 属性设置或返回指定节点的节点值。
nodeValue 属性的替代选择是 textContent 属性。nodeValue只适用于文本节点和属性节点，对标签节点不适用，返回null；

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试nodeValue (runoob.com)</title>
</head>
<body>

<p id="demo">单击按钮获取按钮元素的节点值。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var c=document.getElementsByTagName("BUTTON")[0];
	var x=document.getElementById("demo");  
	x.innerHTML=c.childNodes[0].nodeValue;
	x.childNodes[0].nodeValue=c.childNodes[0].nodeValue;
	//x.childNodes[0].nodeValue 获取文本，对文本赋值
}
</script>
<p><strong>注意:</strong>文本的元素被认为是文本节点,所以我们返回按钮元素的第一个孩子的节点值(childNodes[0])</p>
//x.innerHTML='点我';

</body>

innerHTML和innerText区别

innerHTML返回的是标签内的 html内容，包含html标签。 innerText返回的是标签内的文本值，不包含html标签。

textContent与innerText的区别

1、textContent会获取所有元素的content，包括<script>和<style>元素
2、innerText不会获取hidden元素的content，也就是说隐藏文本无法获取，而textContent能获取所有文本
3、innerText 会带来性能影响，由于 innerText 的值依赖渲染之后的结果，会受到 CSS 样式的影响，因此它会触发重排(reflow)，所以使用它会有一定的性能影响；而 textContent 不会，因此更建议使用 textContent。
4、innerText返回值会被格式化，而textContent不会
两者获取的文本的格式不一样，
5、textContent 是 W3C 兼容的文字内容属性，但是 IE 不支持。innerText 不是 W3C DOM 的指定内容，FireFox不支持。谷歌浏览两者都支持。

清风木子云

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML 之textContent、innerText、innerHTML、nodeValue之间的区别

textContenttextContent 属性设置或者返回指定节点的文本内容。如果设置了textContent属性，任何子节点都会被移除，然后被指定的字符串的文本节点替换。注意：某些时候textContent属性可以被nodeValue属性替代，但是这个属性可以返回子节点的文本。//获取所有列表的文本内容：document.getElementById("myList").textContent;//结果：CoffeeTea，提取了所有子节点的文本内容，并且无空格的并列显示innerT
复制链接

扫一扫