textContent和innerText的区别

最新推荐文章于 2025-02-19 18:20:51 发布

qq_44904590

最新推荐文章于 2025-02-19 18:20:51 发布

阅读量1.2k

点赞数 2

文章标签： js

本文链接：https://blog.youkuaiyun.com/qq_44904590/article/details/107745589

版权

本文详细对比了textContent和innerText在浏览器中的使用差异，包括它们在返回内容、格式化处理、页面影响等方面的区别，以及在设置值时触发的回流与重绘机制。深入探讨了这两种属性在实际开发中的应用与考量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过冰山工作室音频学习的记录 :

起因 : 火狐浏览器把innerText换成了textContent , 但其他浏览器上面,也是可以使用textContent的 .

平常我们使用的时候 , 一般都是先判断浏览器是否支持textContent ,那textContent和innerText有什么区别呢 ?

二者区别:

textContent 返回的包括script和style标签的内容 , innerText则是不包含的.
(最重要的区别) innerText返回的值,依赖于页面的显示. textContent依赖于代码的内容
在使用innerText设置值的时候 , 会触发"回流"操作 ,但是在textContent里面 , 设置值不一定会触发""回流’'操作
- 回流是啥 ? 当我们重新设置了innerText 后 , DOM树会从当前节点回溯到根结点 , 然后从根结点再运行一次(这里又渲染了一遍页面) ,影响整个页面 !
- 重绘是啥 ? 对一个DOM节点往子节点进行排列 . 重绘只是影响页面的一部分 . 回流会引起重绘 , 但重绘不一定引起回流.
- textContent对页面的影响小一些,所以先判断的textContent.
innerText的返回值会被格式化 ,但是textContent的返回值不会被格式化.
innerText会把页面里的空标签当作换行处理, ( 一个空标签是一行 , 连续的多个空标签也是一行) ,但是textContent就返回一行文本(有子标签才会返回多行文本) .
获取文本内容的时候 ,我们还可以直接找到文本节点,再使用nodeValue,但这个方式不能获得DOM内容. 这样获得的东西跟textContent 获得的相似.