深入解析JavaScript中textContent与innerText的本质区别

textContent与innerText的基本概念

在IE浏览器中存在innerText属性，而在Firefox（FF）等标准浏览器中对应的是textContent属性。过去为IE编写脚本的开发者在Firefox环境下找不到innerText时，常建议用textContent替代；反之亦然。

然而，这种简单的替代方案存在误解。网络上许多文章声称“FF中等效于innerText的是textContent”，但这并不准确。两者之间存在关键差异，导致在某些场景下无法直接互换使用。

此前开发一个代码高亮JS插件时，在IE下运行正常，但在FF下出现异常。IE使用innerText，FF使用textContent，字符串处理结果的差异导致了问题。为此，专门进行了对比测试以明确二者区别。

核心机制差异分析

测试结果表明：

innerText的值代表浏览器实际渲染后用户看到的内容。它是经过浏览器解释innerHTML、进行HTML转义、应用CSS样式并去除格式信息后得到的纯文本。例如，<br/>会被转换为换行符，多个连续空格合并为一个，而原始换行符可能被视为单词边界（如空格）。形象地说，元素的innerText值等同于将该元素内容复制粘贴到记事本中的结果。

textContent的值则是innerHTML去除所有HTML标签后的纯文本（该特性疑似源自XMLDOM）。它会对HTML实体（如&lt;、&nbsp;）进行转义，但不解释任何HTML标签，直接剔除它们。此外，它不会按HTML规则格式化文本，例如多个空格会原样保留，原始换行符依然存在，而<br/>不会导致换行。

简而言之，IE中的innerText需要对innerHTML的值执行以下操作：

1、进行HTML转义（等同于XML转义，处理&lt;、&amp;等实体）；

2、经过HTML解析和CSS样式解析；

3、随后剔除所有格式信息；

最终得到纯文本。

而FF中的textContent没有第2、3步，仅在HTML转义后直接剔除所有HTML标签，得到纯文本。

实际渲染效果对比

以下是一个具体示例：

 
<div id="T1">
ABCD
EFG HIJ<br/>KLM &nbsp;N
OPQ<div>RS</div>T
T
</div>

对于id为T1的div：

在IE中的innerText属性值为：

 
ABCD EFG HIJ
KLM N OPQ
RS
T T

而在FF中的textContent属性值为：

 
(这里有个换行)
ABCD
EFG HIJKLM N
OPQRST
T

注意，div中嵌套了另一个div，这更能反映IE的innerText和FF的textContent处理方式的差异：

div是块级（block）元素，默认独占一行。因此，在IE的innerText中，RS独占一行；而FF的textContent完全不理会HTML格式，所以RS与其他字符连在一起，不独占一行。

CSS样式对结果的影响

若进一步观察有趣的结果：

如果给内部div添加style="float:left;"，该div将从块级变为行内元素，不再独占一行。此时，IE的innerText中RS不再独占一行，而是与其他字符连在一起；而在FF中，由于textContent忽略标签和CSS，其值不会发生任何变化。

跨浏览器兼容性与替代方案

由此可见，网上许多关于“让FF支持innerText属性”的说法存在诸多问题。要实现与IE的innerText完全一致的效果，远非想象中简单。若需通过JavaScript让FF具备与innerText完全相同的效果，必须自行解析所有HTML标签属性、解释它们，甚至还需解析CSS。

（不过根据原理，貌似通过剪贴板的复制和取回操作可以在FF下模拟innerText效果（这个未测试），但是存在副作用1，2FF下的剪贴板操作也很麻烦。）

不过幸运的是，大多数情况下我们并不需要如此精确，使用innerHTML进行简单处理即可达到较为接近的效果。

注：以上代码均在IE6和FF3环境下完成测试。