转自下面这位大神：

http://zhangyaochun.iteye.com/blog/1391370

其实关于这textContent与innerText有很多碎碎的东西，不过个人觉得还是一个不错的topic，好好讲讲吧。

1、关于兼容性

这个很多人应该都了解：

innerText除了ff3.6外，Chrome Safari Opera均支持

textContent除IE8及以下版本外，IE9 Chrome Safari Opera均支持

2、关于返回值

第一：这个其实也算兼容性里面的一种，主要考虑不同场景下的返回值：

如果容器设置了"visibility:hidden"

在Chrome Safari中获取该容器元素的innerText返回值是“”

在其他均返回的是正常的文本

相反，如果容器visible没有设置，而是默认值visibility

不存在浏览器差异

结论：

在Webkit下，innerText的返回值依赖与元素的visibility的值

第二：对于标签如<br />等的不同处理。

innerText是将元素的innerHTML换码---解释---显示，去除各种格式信息留下的是纯文本。

会将多个空格合并成一个

会将<br />转成换行符

textContent是innerHTML去除所有标签后的内容

会将&lt;这些进行换码，直接剔除html的语义化标签

会保留多个空格

不会将<br />进行转换

第三：对应script标签里面的内容

innerText不能返回

textContent可以

textContent 与innerText的更多相关文章

  1. textContent、innerText的用法，在文档中插入纯文本

    有时候需要查询纯文本形式的元素内容,或者在文档中插入纯文本.标准的方法是用Node的textContent属性来实现: var para = document.getElementsByTagName ...

  2. textContent、innerText 以及Event事件兼容性问题

    今天在完成前端的简单练习时发现了一些兼容性的问题,百度后得以解决. 这里主要讨论Firefox与Chrome的兼容性问题. textContent与 innerText 在javascript中, 为 ...

  3. textContent和innerText属性的区别

    原文摘自 textContent和innerText属性的区别 <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  4. JS魔法堂：被玩坏的innerHTML、innerText、textContent和value属性

    一.前言 由于innerText并非W3C标准属性,因此我们无法在FireFox中使用它(修正:FF45+已经支持innerText属性),一般情况下我们可以使用textContent来代替,但它两者 ...

  5. innerHTML，innertext ，textcontent，write（）

    innerhtml属于对象的一个属性,一般用于向已经存在的标签中写入内容,或者读取标签的内容. innertext属于对象的一个属性,一般只能用于写入内容,或者读取内容,不能读取dom 中的标签,且只 ...

  6. textContent、innerHTML、innerText、outerText、outerHTML、nodeValue使用场景和区别

    今天要讲的这些属性都可以用来获取某个元素的内容,你可能会觉得不可思议,或是说上一句"丧心病狂"也.但当你看完以下内容后,会发现除outerText无用外,其他的都有各自的使用场景, ...

  7. [转]被玩坏的innerHTML、innerText、textContent和value属性

    一.前言 由于innerText并非W3C标准属性,因此我们无法在FireFox中使用它,一般情况下我们可以使用textContent来代替,但它两者是否就能完全等同呢?在坑爹的表单元素(如input ...

  8. vue-learning：12 - 2 - 区分：outerHTML - innerTHML - outerText - innerText - textContent

    区分:outerHTML - innerTHML - outerText - innerText - textContent 获取值 <div id="outer"> ...

  9. DOM 操作内容 innerText/innerHTML

    DOM 操作内容 innerText/innerHTML innerText属性(firefox不支持,可用 textContent)var div = document.getElementById ...

随机推荐

  1. SQL分类

    SQL(Structure Query Language)结构化查询语言,是使用关系型数据库的应用语言. SQL主要可以划分为以下三个类别: DDL(Data Define Language)语句:数 ...

  2. C#泛型类容器

    非泛型容器的缺点: (1) 性能问题. 在使用值类型时,必须将值类型装箱(Boxing)以便推送和存储,并且在将值类型从容器中取出时将其取消装箱(Unboxing).装箱和取消装箱都会根据值类型的权限 ...

  3. OD调试2

    通过视频学习,实现了一下简单的traceme爆破.这不是把它的序列号破译出来,只是识别了自己的号码,不算真正的爆破.(与期望有点差异) 先来看一下这款软件的逻辑结构. 先输入用户名  以及序列号 然后 ...

  4. SqlServer性能优化：创建性能监视器（二）

    添加三个选项: 下一步就可以了 Sql跟踪的模板: 跟踪Sql 语句的执行情况: 使用刚才的新建的模板: 用到的Sql语句: select * from [Sales].[SalesOrderDeta ...

  5. JM8.6学习

    1. vs2010 设置参数 编译运行JM8.6 (参考http://bbs.chinavideo.org/forum.php?mod=viewthread&tid=15695&hig ...

  6. JavaScript中__proto__与prototype的关系

    一.所有构造器/函数的__proto__都指向Function.prototype,它是一个空函数(Empty function) 1 2 3 4 5 6 7 8 9 Number.__proto__ ...

  7. Startup key combinations for Intel-based Macs

    Learn about the startup key combinations you can use with Intel-based Macs. You can use the followin ...

  8. Array.sort()方法

    Array.sort()方法将数组中的元素排序并返回排序后的数组. 当不带参数时,默认按照顺序排序,也就是从小到大.当然,也可以直接给sort加一个比较函数比较. ,,]; arr.sort(); c ...

  9. HDU 4465 数值计算，避免溢出

    数学,数值计算,求期望 题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4465题目描述:有两个盒子,每个中有n个糖果,(n<10^5)每次任选一 ...

  10. wireshark如何抓取别人电脑的数据包

    抓取别人的数据包有几种办法,第一种是你和别人共同使用的那个交换机有镜像端口的功能,这样你就可以把交换机上任意一个人的数据端口做镜像,然后你在镜像端口上插根网线连到你的网卡上,你就可以抓取别人的数据了: ...