小tips: JS DOM innerText和textContent的区别
byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8941
本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。
一、之前错误的认识
innerTextIE6就开始支持，那个时候，Firefox浏览器是不支持这个API的，一直到2016年3月份Firefox 45+才开始支持。
而 textContent IE9浏览器才开始支持：
由于存在兼容性，因此在开发PC端项目的时候获取元素的文本内容都是下面的语句：
var text = dom.innerText || dom.textContent;
久而久之，就误认为 innerText 和 textContent 作用是一样的。
最近一次实践突然让我发现，娘啊，原来 innerText 和 textContent 是有区别的，这种区别小萌新反而容易知道（因为会疑惑为何会有两个API），而我这样深受兼容性问题影响的大叔反而注意不到（以为是IE的文本获取API和Firefox的文本获取API互相支持）。
究竟区别在哪里呢？我们看几个例子就知道了。
二、innerText和textContent的不同
不同之一， 调用对象不同 。innerText只有HTML元素才可以调用，但是textContent任意Node节点都可以：HTMLElement.innerText和Node.textContent。
不同之二， 值获取规则不同 。
1. 规则差异之块级元素与换行符
已知有下面一段HTML：
一段文字内容...
实时效果如下：
一段文字内容 …
可以看到设置了 position:absolute 的 元素里面的点点点 ... 和前面的文字内容是紧密连接在一起的，前后没有任何空格。
但是，当我们分别获取 id="dom" 的
元素的 innerText 和 textContent 值的时候，有意思的事情发生了， innerText 的返回值居然在点点点前面出现了一个空格。
如下截图所示：
innerText 和 textContent 表现出了不同，眼见为实，您可以狠狠地点击这里： innerText和textContent区别对比demo
为什么会有这样的差异呢？
原文地址： https://www.zhangxinxu.com/wordpress/?p=8941
实际上是 innerText 会保留块级元素的换行特性，以换行符形式呈现。在HTML中，如果 white-space 不是 pre 或 pre-wrap 则会表现为空格。也就是下图中的空格实际上是换行符：
例如，我们设置呈现结果的父元素 white-space:pre ，则会出现下图所示的效果：
在本例中，虽然 元素是内联元素，但由于设置了 position:absolute 使其 display 计算值变成了 block ，因此，虽然视觉上没有换行，但 innerText 获取的时候依旧产生了换行，导致空格出现。
2. 规则差异之隐藏元素的获取与否
已知有下面一段HTML：
我后面有一段隐藏文字，就是我啦！
此时，我们显示 dom2.innerText 和 dom2.textContent 的返回值，也会看出区别，如下图所示：
可以看到， display:none 元素是无法使用 innerText 获取的，但是 textContent 却可以，无论元素隐藏与否。
您可以狠狠地点击这里： innerText和textContent区别对比demo
此外，由于 innerText 属性值的获取会考虑CSS样式，因此读取 innerText 的值将触发回流以确保计算出的样式是最新的，而回流在计算上很昂贵，会降低性能，因此应尽可能避免回流。而 textContent 只是单纯读取文本内容，因此性能更高。
4. IE浏览器不符合上面规则
但是在IE浏览器下， innerText 的表现和规范是不符的，最终表现为 textContent 属性一样的效果，也就是没有空格，也不会不显示隐藏元素，例如下面IE11下的效果截图：
另外，与 textContent 不同，在Internet Explorer（版本11及以下）中更改 innerText 将从元素中移除子节点，并永久销毁所有子文本节点。不可能再将节点插入任何其他元素或同一元素中。
三、最后的结论
innerText 由于存在诸多特别的特性、以及兼容性差异，以及性能方面问题，以及实际开发的需求的考量，不推荐使用，推荐使用 textContent 获取文本内容。
var text = dom.textContent;
如果你的项目还需要兼容IE8浏览器，则使用下面的代码：
var text = dom.textContent || dom.innerText;
四、三言两语的结语
没想到 innerText 包含的细节这么多。innerHTML是高频使用属性，没想到原本以为相对应也会高频使用的 innerText 居然这么有故事，地位被 textContent 取代了，就像小说里的故事一样，总是出乎意料。
另外，如果你要在一个DOM元素中改变文字内容，推荐使用 textContent ，而不是 innerHTML ，性能会更高一点。
好了，就说这么多，一个小小的研究，希望能够对大家的学习有所帮助。
本文为原创文章，欢迎分享，勿全文转载，如果内容你实在喜欢，可以加入收藏夹，永不过期，而且还会及时更新知识点以及修正错误，阅读体验也更好。
本文地址： https://www.zhangxinxu.com/wordpress/?p=8941
（本篇完）
About The Author
