innerText和textContent的不同

一、innerText和textContent的不同 

不同之一，调用对象不同。

innerText只有HTML元素才可以调用，但是textContent任意Node节点都可以：

HTMLElement.innerText和Node.textContent。

不同之二，值获取规则不同。

1. 规则差异之块级元素与换行符

已知有下面一段HTML：

<p id="dom">一段文字内容<span style="position:absolute;">...</span></p>

实时效果如下：

一段文字内容…

可以看到设置了position:absolute的<span>元素里面的...和前面的文字内容是紧密连接在一起的，前后没有任何空格。

但是，当我们分别获取id="dom"的<p>元素的innerText和textContent值的时候，有意思的事情发生了，innerText的返回值居然在...前面出现了一个空格。

如下截图所示：

实际上是innerText会保留块级元素的换行特性，以换行符形式呈现。在HTML中，如果white-space不是pre或pre-wrap则会表现为空格。也就是下图中的空格实际上是换行符：

例如，我们设置呈现结果的父元素white-space:pre，则会出现下图所示的效果：

在本例中，虽然<span>元素是内联元素，但由于设置了position:absolute使其display计算值变成了block，因此，虽然视觉上没有换行，但innerText获取的时候依旧产生了换行，导致空格出现。

2. 规则差异之隐藏元素的获取与否

已知有下面一段HTML：

<p id="dom2">我后面有一段隐藏文字<span hidden>，就是我啦！</span></p>

此时，我们显示dom2.innerText和dom2.textContent的返回值，也会看出区别，

如下图所示：

可以看到，display:none元素是无法使用innerText获取的，但是textContent却可以，无论元素隐藏与否。

3. 规则差异之性能与回流

此外，由于innerText属性值的获取会考虑CSS样式，因此读取innerText的值将触发回流以确保计算出的样式是最新的，而回流在计算上很昂贵，会降低性能，因此应尽可能避免回流。

而textContent只是单纯读取文本内容，因此性能更高。

4. IE浏览器不符合上面规则

但是在IE浏览器下，innerText的表现和规范是不符的，

最终表现为textContent属性一样的效果，也就是没有空格，也不会不显示隐藏元素，

例如下面IE11下的效果截图：

一般建议使用textcontent

小补充

box-sizing:border-box.需要设置width和height才会生效