javascript textContent与innerText的异同分析

 更新时间:2010年10月22日 15:35:12   作者:  
因为发现网络上很少有这方面的内容,因此就把自己私有blog上的这篇文章搬出来到Boluor的公开blog,方便其它人查阅。
textContent与innerText的不同

IE下有个innerText属性,FF下有个textContent属性。很多以前给IE写脚本的,在FF下找不到innerText属性,于是网上搜到的建议是用textContent来替代。反之给FF写脚本的也一样。

但是实际上,这里有个误解。网上很多文章说“FF下等效于innerText属性的属性是textContent”————但是事实上并非如此。innerText与textContent有几点很重要的不同,导致它们在一些情况下不能直接互换使用。

前些日子写了个代码高亮JS插件,在IE下工作完全正常,而在FF下就不对头。在IE下使用的是innerText属性,而在FF下使用的则是textContent属性。在进行字符串处理的时候二者的不同导致了完全不一样的结果。于是就专门写了点东西来测试二者的不同。

根据测试的结果表明:
innerText:它的内容实际上就是你在浏览器看到的内容。它的值是经过浏览器解释过的结果:它将元素的innerHTML换码、解释,最终显示出来,然后去除各种格式信息留下的纯文本。它会把<br/>换成换行符,会将多个空格并成一个空格对待,而本来的换行符却并不会引起换行,IE会将其当作一个普通的单词边界(一般是空格)。再说的形象点,一个元素的innerText属性的值,和你将这个元素内容复制粘贴到记事本里的内容一致。

textContent:它的内容则是innerHTML去除所有标签后的内容(我怀疑这个是从XMLDOM中照搬过来的属性,特性完全一致)。它会将innerHTML中的转义字符(&lt;、&nbsp;什么的)进行换码,但是不对任何html标签进行解释,而是直接剔除它们。它也不会对innerHTML中的文本按照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反映为上述div中的RS独占一行,而FF的textContent完全不理会HTML格式,因此其textContent中的RS是和其它字符连在一起的,不会独占一行。

如果想更进一步,看看这个有趣的结果:
假如给里面那个div加一个style=”float:left;”,那么这个div就会由块元素变化为行元素,不再独占一行,因此IE的innerText属性中RS便不再独占一行,而与其它字符连在一起,而在FF中由于textContent不理会标签更不会理会CSS,因此它的textContent属性的值不会有任何变化。

这么看来,很多网上说的“让FF支持innerText属性”云云,其实都是多多少少有问题的。要实现IE的innerText,远没有想象中的那么简单,你若要使用JavaScript让FF拥有和innerText完全一样的效果,得自己把html标签属性全部parse一遍,解释它们,甚至还需要去解释css……
(不过根据原理,貌似通过剪贴板的复制和取回操作可以在FF下模拟innerText效果(这个未测试),但是1有副作用,2FF下的剪贴板操作也很麻烦。)

不过还好,大多数时候我们并不需要那么精确,使用innerHTML做点简单的处理即可达到比较接近的效果了。

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

相关文章

  • 用js实现图片旋转的两种方案

    用js实现图片旋转的两种方案

    这篇文章主要给大家介绍了关于用js实现图片旋转的两种方案, 旋转的效果就是根据鼠标的的移动距离来显示不同的图片,形成视觉差,仿佛就是在正真的旋转,需要的朋友可以参考下
    2023-07-07
  • javascript获取url上某个参数的方法

    javascript获取url上某个参数的方法

    获取url上的某个参数的方法有很多,在本文为大家介绍下使用javascript是如何实现的,感兴趣的朋友不要错过
    2013-11-11
  • 微信小程序事件绑定传参冒泡及捕获的示例详解

    微信小程序事件绑定传参冒泡及捕获的示例详解

    这篇文章主要为大家介绍了微信小程序事件绑定传参冒泡及捕获的示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步早日升职加薪
    2022-04-04
  • JS实现控制图片显示大小的方法【图片等比例缩放功能】

    JS实现控制图片显示大小的方法【图片等比例缩放功能】

    这篇文章主要介绍了JS实现控制图片显示大小的方法,即实现图片等比例缩放功能,涉及JS动态操作页面元素属性相关技巧,需要的朋友可以参考下
    2017-02-02
  • js/jquery解析json和数组格式的方法详解

    js/jquery解析json和数组格式的方法详解

    本篇文章主要是对js/jquery解析json和数组格式的方法进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • JS保留两位小数 四舍五入函数的小例子

    JS保留两位小数 四舍五入函数的小例子

    这篇文章主要介绍了JS保留两位小数 四舍五入函数的小例子,有需要的朋友可以参考一下
    2013-11-11
  • Iframe 自动适应页面的高度示例代码

    Iframe 自动适应页面的高度示例代码

    这篇文章主要介绍了Iframe如何自动适应页面的高度,需要的朋友可以参考下
    2014-02-02
  • 微信小程序 Storage更新详解

    微信小程序 Storage更新详解

    这篇文章主要介绍了微信小程序 Storage更新详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • 微信JSSDK上传图片

    微信JSSDK上传图片

    做过微信开发的都知道,在部分android机型里微信不支持网页上传图片的,这是由于这些机型的文件上传存在内存泄漏,会导致微信闪退,所以微信内置浏览器将文件上传屏蔽,本篇文章给大家介绍使用微信jssdk如何上传图片,需要的朋友可以关注下
    2015-08-08
  • JavaScript构建自己的模板小引擎示例

    JavaScript构建自己的模板小引擎示例

    这篇文章主要介绍了JavaScript构建自己的模板小引擎,结合实例形式分析了javascript自定义模板引擎的实现与使用方法,需要的朋友可以参考下
    2018-12-12

最新评论