textContent 和 innerText

最新推荐文章于 2024-04-22 08:33:24 发布

monkindey

最新推荐文章于 2024-04-22 08:33:24 发布

阅读量2.7k

点赞数 1

分类专栏： html 文章标签： javascript innerText textContent

本文链接：https://blog.csdn.net/monkindey/article/details/23179581

版权

2 篇文章 0 订阅

订阅专栏

Gets or sets the text content of a node and its descendents. ---- MDN
Node.textContent两者都是返回一个节点还有它的后代元素的文本内容
Setting this property on a node removes all of its children and replaces them with a single text node with the given value. ---- MDN
Node.textContent 可以通过这个API(innerText & textContent)来增删查改一个元素的文本。
注意：Node.textContent = ""或者Node.innerText = ""会直接把Node的子节点元素直接删掉，而不只是那些文本

document.textContent是为null，但是document.innerText是undefined
获取的文本内容不一样，我们来看个例子
```
<div id="player">
			<div>
				nash,
				kobe
			</div>
			<div style="display: none">
				and monkindey
			</div>
    </div>
```
textContent: 不会去掉空格和隐藏的文本，所以它这样子显示的：

innerText:
浏览器兼容不一样，innerText不是web标准，但是在ie被广泛使用，所以它在ie浏览器的兼容性较好，但是由于有性能的劣势，所以现在已经被textContent替代了，而一些javascript库还用这个API，主要原因就是其IE兼容性好，但是firefox已经不支持该API。那textContent的兼容性呢？
主要是ie的兼容性较差，其他浏览器都广泛支持。
As innerText is aware of CSS styling, it will trigger a reflow,
whereas textContent will not ---MDN
它会导致页面重绘，这个肯定会导致页面的性能较差，页面重绘都是很浪费浏览器体力的一个动作，尽量要减少这样子的事件出现。