javascript textContent与innerText的异同分析


Posted in Javascript onOctober 22, 2010

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中的转义字符(<、 什么的)进行换码,但是不对任何html标签进行解释,而是直接剔除它们。它也不会对innerHTML中的文本按照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反映为上述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下完成测试。

Javascript 相关文章推荐
js点击页面其它地方将某个显示的DIV隐藏
Jul 12 Javascript
JS完成代码前最好对其做5件事
Apr 07 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
Feb 21 Javascript
学习JavaScript设计模式之中介者模式
Jan 14 Javascript
jQuery无刷新上传之uploadify3.1简单使用
Jun 18 Javascript
VueJs路由跳转——vue-router的使用详解
Jan 10 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
Apr 05 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
Feb 03 Javascript
浅谈Vue内置component组件的应用场景
Mar 27 Javascript
图片文字识别(OCR)插件Ocrad.js教程
Nov 26 Javascript
JavaScript中的this基本问题实例小结
Mar 09 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
Apr 09 Javascript
js各种验证文本框输入格式(正则表达式)
Oct 22 #Javascript
JavaScript学习点滴 call、apply的区别
Oct 22 #Javascript
Web 前端设计模式--Dom重构 提高显示性能
Oct 22 #Javascript
jQuery中add实现同时选择两个id对象
Oct 22 #Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
Oct 22 #Javascript
为jQuery.Treeview添加右键菜单的实现代码
Oct 22 #Javascript
使用jQuery模板来展现json数据的代码
Oct 22 #Javascript
You might like
php学习之 认清变量的作用范围
2010/01/26 PHP
解析php中mysql_connect与mysql_pconncet的区别详解
2013/05/15 PHP
PHP简单判断字符串是否包含另一个字符串的方法
2016/03/25 PHP
docker-compose部署php项目实例详解
2019/07/30 PHP
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
语义化 H1 标签
2008/01/14 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
2014/08/01 Javascript
Jquery焦点图实例代码
2014/11/25 Javascript
JavaScript中使用Object.create()创建对象介绍
2014/12/30 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
2016/03/07 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
2017/03/02 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
ReactNative实现图片上传功能的示例代码
2017/07/11 Javascript
Vue.js划分组件的方法
2017/10/29 Javascript
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
JS中判断字符串存在和非空的方法
2018/09/12 Javascript
VUE安装使用教程详解
2019/06/03 Javascript
解决Vue中 父子传值 数据丢失问题
2019/08/27 Javascript
[05:39]2014DOTA2西雅图国际邀请赛 淘汰赛7月14日TOPPLAY
2014/07/14 DOTA
python文件特定行插入和替换实例详解
2017/07/12 Python
python基础_文件操作实现全文或单行替换的方法
2017/09/04 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
Python遍历字典方式就实例详解
2019/12/28 Python
Pandas中DataFrame基本函数整理(小结)
2020/07/20 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
Python3使用Selenium获取session和token方法详解
2021/02/16 Python
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
Java的for语句中break, continue和return的区别
2013/12/19 面试题
实习生矿工检讨书
2014/10/13 职场文书
高中物理教学反思
2016/02/19 职场文书
Nginx部署vue项目和配置代理的问题解析
2021/08/04 Servers
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技
python如何为list实现find方法
2022/05/30 Python
Python中的socket网络模块介绍
2022/07/23 Python