JavaScript中HTMLElement上的innerText和textContent属性的区别

原创 野人  2022-03-18 23:35  阅读 13 次

在捣鼓编辑器中的代码高亮功能时,发现一些TinyMCE插件代码中会用到HTMLElement上的innerTexttextContent这两个属性,就是有点奇怪,因为大多数的情况下,用到的比较多的还是innerText,所以就想研究下这两个属性之间有什么区别?

兼容性方面

innerText大于textContent,但是可以忽略了,因为兼容性的差异,主要是在IE6-8,按照目前微软已内置自带的浏览器Edge后,所以我觉得可以忽略了。

这块的数据,来源于:https://caniuse.com/

性能方面

innerText小于textContent

比如有一段HTML代码是这样的:<div><p>我是段落</p><span style="display:none">我被CSS隐藏了</span></div>

innerText获取结果:【我是段落】,也就是会忽略被隐藏的HTML标签,意味着innerText在获取的时候,是会解析CSS样式的,那这样的话就会触发回流以确保计算出的样式是最新的,而回流在计算上很昂贵,会降低性能,而且像<br />换行的HTML标签,会自动替换成\n,因为性能较低。

textContent获取结果:【我是段落我被CSS隐藏了】,只是单纯的读取文本内容(不会剔除格式信息和合并连续的空格,因此\t\r\n和连续的空格将生效,简单的理解就是输入什么获取到的内容就是什么),因为性能较高。

实际项目中

其实上,真实项目中,为了严谨性,两者的代码都会写上,当然了优先是用textContent

本文地址:https://www.yerenwz.com/5950.html
版权声明:本文为原创文章,版权归 野人 所有,欢迎分享本文,转载请保留出处!

发表评论