浅谈一下textContent与innerText

其实关于这textContent与innerText有很多碎碎的东西，不过个人觉得还是一个不错的topic，好好讲讲吧。

 

1、关于兼容性

 

这个很多人应该都了解：

 

• innerText除了ff3.6外，Chrome Safari Opera均支持
  
  
• textContent除IE8及以下版本外，IE9 Chrome Safari Opera均支持

 

2、关于返回值

 

第一：这个其实也算兼容性里面的一种，主要考虑不同场景下的返回值：

 

• 如果容器设置了"visibility:hidden" 

          在Chrome Safari中获取该容器元素的innerText返回值是“”

          在其他均返回的是正常的文本

 

• 相反，如果容器visible没有设置，而是默认值visibility

             不存在浏览器差异

 

 结论：

 

• 在Webkit下，innerText的返回值依赖与元素的visibility的值

 

第二：对于标签如<br />等的不同处理。

 

• innerText是将元素的innerHTML换码---解释---显示，去除各种格式信息留下的是纯文本。

1. 会将多个空格合并成一个
2. 会将<br />转成换行符

• textContent是innerHTML去除所有标签后的内容

1. 会将&lt;这些进行换码，直接剔除html的语义化标签
2. 会保留多个空格
3. 不会将<br />进行转换

 

 

第三：对应script标签里面的内容

 

• innerText不能返回
• textContent可以