innerText和textContent的区别

最新推荐文章于 2024-12-11 17:28:48 发布

转载最新推荐文章于 2024-12-11 17:28:48 发布 · 1.2k 阅读

本文详细对比了innerText和textContent两个DOM属性的功能与使用场景。innerText获取的文本内容与浏览器实际显示一致，忽略script和style标签；textContent则直接读取源代码中的文本，包括换行和空白字符，能获取script和style内的文本。

innerText 和 textContent 的作用都是获取元素之间的文本内容，但是它们的在获取到文本内容的结果也有很大的不同

innerText 的值依赖于浏览器的显示结果，textContent 依赖于源码的显示结果

<div>
	<span>123</span>
	<span>abc</span>
</div>
<script type="text/javascript">
	var div = document.querySelector("div")
	console.log(div.innerText)
	console.log(div.textContent)
</script>
输出结果：
innerText：123 abc
textContent：
					123
					abc

可以看出，innerText 输出结果是在和页面中显示是一样的在同一行显示，而 textContent 输出结果和代码中的显示是一致的。

如果一个元素之间包含了script标签或者style标签，innerText是获取不到这两个元素之间的文本的，而textContent可以。

<div>
	<span>123</span>
	<script>var a = "xyz";</script>
</div>
<script type="text/javascript">
	var div = document.querySelector("div")
	console.log(div.innerText)
	console.log(div.textContent)
</script>
输出结果：
innerText：123
textContent：
					123
					var a = "xyz";

由于 innerText 的输出结果和浏览器页面上的显示是一致的，而浏览器不会显示 script 标签中的内容，所有只会输出 123

textContent会把空标签解析成换行（几个空标签就是几行），innerText只会把block元素类型的空标签解析换行，并且如果是多个的话仍看成是一个，而inline类型的原素则解析成空格

<div>
	123
	<span></span>
	<span></span>
	<div></div>
	<div></div>
	abc
</div>
<script type="text/javascript">
	var div = document.querySelector("div")
	console.log(div.innerText)
	console.log(div.textContent)
</script>
输出结果：
innerText：	123
					abc
textContext：
					123
			
			
					abc