innerText和textContent的区别

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

proxy_

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

阅读量1.1k

点赞数 2

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