比较innerText和textContent

在IE下，我们用innerText属性来获取节点文本，但FF中没有innerText，而提供了一个功能类似的属性textContent，用久了，感觉innerText和textContent是等效的，今天在网上看了一篇比较它们的文章，转过来：



通过在IE下的结果可以发现，innerText是需要对innerHTML的值进行HTML转义(比如对 、&等转义字符进行处理)，经过HTML和CSS样式的解释(比如会把br换成换行符，会将多个空格合并为一个空格，然而原本是换行符的却不会引起换行，IE下会将其当作单词边界<一般是空格>处理)，最后剔除格式信息之后而留下的纯文本内容。

而相对比FF中的textContent则没有经过HTML解释和剔除格式信息，而是经过HTML转义后直接剔除所有html标签后得到的纯文本。它也不会对innerHTML中的文本按照HTML的方式进行格式转换，比如多个空格还会原原本本地保留，不会合并为一个空格，换行符仍然存在(可以注意上图中红色框处，显示是一个换行存在的)；相反<br/>却不会导致换行。

注意：请大家仔细对照html代码结构和结果图示，也许你会发现有个地方能明显反映出innerText和textContent各自处理方式的不同；那就是对结构中嵌套的div元素的处理，div是块(block)元素，默认时会独占一行，所以对照上面的总结，证实了在IE中innerText反映为block独占一行，而相反FF中的textContent完全无视HTML格式，结果也证实了block和后面的Tao连在了一起，并没有独占一行。

经过上面的测试，可以验证完全说两者等效还是不太准确的；不过呢，在现实使用过程中，大多数时候我们并不需要那么精确，所以使用innerText和textContent来兼容不同浏览器环境，还是可以达到比较接近预期的效果的。

参考资料

·innerText 与 textContent：http://www.f2e-arsenal.com/?p=125