小tips: JS DOM innerText和textContent的区别

这篇文章发布于 2019年09月7日,星期六,21:09,归类于 JS API。 阅读 29223 次, 今日 15 次 15 条评论

 

innerText和textContent

一、之前错误的认识

innerText IE6就开始支持,那个时候,Firefox浏览器是不支持这个API的,一直到2016年3月份Firefox 45+才开始支持。

innerText兼容性

textContent IE9浏览器才开始支持:

textContent兼容性

由于存在兼容性,因此在开发PC端项目的时候获取元素的文本内容都是下面的语句:

var text = dom.innerText || dom.textContent;

久而久之,就误认为innerTexttextContent作用是一样的。

最近一次实践突然让我发现,娘啊,原来innerTexttextContent是有区别的,这种区别小萌新反而容易知道(因为会疑惑为何会有两个API),而我这样深受兼容性问题影响的大叔反而注意不到(以为是IE的文本获取API和Firefox的文本获取API互相支持)。

究竟区别在哪里呢?我们看几个例子就知道了。

二、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>元素的innerTexttextContent值的时候,有意思的事情发生了,innerText的返回值居然在点点点前面出现了一个空格。

如下截图所示:

innerText出现了空格

innerTexttextContent表现出了不同,眼见为实,您可以狠狠地点击这里:innerText和textContent区别对比demo

为什么会有这样的差异呢?

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

innerText出现了空格

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

换行呈现点点点示意

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

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

已知有下面一段HTML:

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

此时,我们显示dom2.innerTextdom2.textContent的返回值,也会看出区别,如下图所示:

innerText隐藏内容没显示

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

您可以狠狠地点击这里:innerText和textContent区别对比demo

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

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

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

但是在IE浏览器下,innerText的表现和规范是不符的,最终表现为textContent属性一样的效果,也就是没有空格,也不会不显示隐藏元素,例如下面IE11下的效果截图:

IE浏览器下innerText和textContent表现一致

另外,与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,性能会更高一点。

好了,就说这么多,一个小小的研究,希望能够对大家的学习有所帮助。

(本篇完)

分享到:


发表评论(目前15 条评论)

  1. 苏铭儿说道:

    太6了

  2. 宋宇说道:

    学到了,😘

  3. 郭旭说道:

    vue的 v-text 指令就是更新元素的 textContent

    • vtgww说道:

      看了vue的源码,对作者为什么使用textContent的用法产生了疑问,现在焕然大悟了…

  4. 三国哥哥说道:

    滴,老人卡

  5. lemon说道:

    滴。学生卡

  6. 张建英说道:

    ”由于innerText属性值的获取会考虑CSS样式,因此读取innerText的值将触发回流“ 为啥去内容会触发回流呀?

  7. 太想飞说道:

    滴,偶像卡

  8. mt说道:

    学习了

  9. kido说道:

    学到了

  10. JinGeo Bob说道:

    滴。。。 学生卡

  11. 猫儿晃晃说道:

    又涨知识了,感谢大佬的分享

  12. Jay.chou说道:

    哎呦,学习了。

  13. HelloWorld说道:

    平常只用过 innerText,没用过 textContent,涨知识了