转自下面这位大神：

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. 删除oracle表中的完全重复数据

    今天数据库除了个问题:项目中的一张表,数据是从另外一个系统中相同的表里弄过来的,但是可能由于昨天同事导数据导致我这张表中的数据出现了完全相同的情况(所有字段),全部是两条,需要删除相同的数据. 做法: ...

  2. docker 源码分析 一（基于1.8.2版本），docker daemon启动过程；

    最近在研究golang,也学习一下比较火的开源项目docker的源代码,国内比较出名的docker源码分析是孙宏亮大牛写的一系列文章,但是基于的docker版本有点老:索性自己就git 了一下最新的代 ...

  3. 如何编译spring源码，并导入到eclipse中

    wsc@WSC-PC /d/wsc/study-spring-source$ git clone https://github.com/spring-projects/spring-framework ...

  4. hasLayout与BFC的触发条件

    hasLayout与BFC是分别在IE和其他浏览器上的两个作用很相近的概念,在很多时候,我们需要触发它们去实现有些效果.例如清除浮动时需要触发hasLayout与BFC:很多自适应的两栏和三栏布局(两 ...

  5. Ubuntu Command-Line: Enable Unlimited Scrolling in the Terminal

    At times when using the terminal, the output from a command can be so long, you simply can’t scroll ...

  6. BZOJ 2595 斯坦那树

    很久以前就想做,后来弃坑了. 最近又在群里有人问了类似的问题,艾老师说是斯坦纳树(%%%) 就是状压DP,然后用Spfa对状态进行转移. #include <iostream> #incl ...

  7. Python 入门指南

    Release: 3.4 Date: March 29, 2014 Python 是一门简单易学且功能强大的编程语言. 它拥有高效的高级数据结构,并且能够用简单而又高效的方式进行面向对象编程. Pyt ...

  8. phalcon:跟踪sql语句

    在phalcon里有一个\Phalcon\Db\Profiler 类,这个类可以用来记录sql语句并计算消耗的时间.那么如何使用它呢? 手册里其实已经提供了方法,总结如下: 1.向$di里注册prof ...

  9. Thrift 个人实战--RPC服务的发布订阅实现(基于Zookeeper服务)

    前言: Thrift作为Facebook开源的RPC框架, 通过IDL中间语言, 并借助代码生成引擎生成各种主流语言的rpc框架服务端/客户端代码. 不过Thrift的实现, 简单使用离实际生产环境还 ...

  10. java 泛型思考

    java泛型并没有像C++那样原生支持,因此,为了保证迁移兼容性,编译器在编译时会擦除具体类型,因此不能通过泛型调用具体方法. 如果调用必须用extends关键字限定范围,也正是由于这个原因,java ...