比较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

评论: 0 | 引用: 0 | 查看次数: 7612
发表评论
登录后再发表评论!