本文深入分析JavaScript中textContent与innerText的本质区别。尽管常被混用，但二者处理HTML标签、CSS样式及空白字符的逻辑截然不同。innerText模拟用户可见文本，受CSS影响；textContent仅返回原始文本节点，忽略格式。了解这些差异有助于在跨浏览器开发中做出正确选择，避免内容渲染错误。
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实体（如<、 ）进行转义，但不解释任何HTML标签，直接剔除它们。此外，它不会按HTML规则格式化文本，例如多个空格会原样保留，原始换行符依然存在，而<br/>不会导致换行。
简而言之，IE中的innerText需要对innerHTML的值执行以下操作：
1、进行HTML转义（等同于XML转义，处理<、&等实体）；
2、经过HTML解析和CSS样式解析；
3、随后剔除所有格式信息；
最终得到纯文本。
而FF中的textContent没有第2、3步，仅在HTML转义后直接剔除所有HTML标签，得到纯文本。
实际渲染效果对比
以下是一个具体示例：
代码如下:
<div id="T1">
ABCD
EFG HIJ<br/>KLM 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环境下完成测试。