转自下面这位大神:

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. 北大poj-1062

    昂贵的聘礼 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 43523   Accepted: 12760 Descripti ...

  2. RabbitMQ/JAVA (路由选择)

    上篇博文中,我们建立了一个简单的日志系统.可以广播消息给多个消费者.本篇博文,我们将添加新的特性--我们可以只订阅部分消息.比如:我们可以接收Error级别的消息写入文件.同时仍然可以在控制台打印所有 ...

  3. Codeforces Round #351 (VK Cup 2016 Round 3, Div. 2 Edition)

    A.暴力枚举,注意游戏最长为90分钟 B.暴力,c[l]++,c[r]--,记录中间有多长的段是大小为n的,注意特判m=0的情况 C.暴力枚举,我居然一开始没想出来!我一直以为每次都要统计最大的,就要 ...

  4. 如何把TOMCAT 添加到服务中自动启动

    1.配置系统参数: JAVA_HOME:C:\Program Files\Java\jdk1.8.0_51   //本机Jdk的安装路径,已配置相关Java应用的无需再配置. CATALINA_HOM ...

  5. gcc学习笔记

    1:第一个程序 : hello world #include <stdio.h> int main(void) { printf("Hello , world ! \n" ...

  6. 黑马程序员:Java编程_异常

    =========== ASP.Net+Android+IOS开发..Net培训.期待与您交流!=========== 异常即对问题的描述,将问题进行对象的封装. 1. 异常体系:Throwable ...

  7. skynet的协程

    之前对skynet的印象,主要是来自于我对golang的理解,对gevent开发的经验,以及云风的blog.对于底层的代码,并没有仔细去阅读过.最近在实现业务系统的时候,发现有同事在同一个函数里做了一 ...

  8. server.transfer 用法

    server.transfer 特点: 1:大家熟悉的一个特点,用server.transfer 跳转到新页面时,浏览器的地址是没有改变的(因为重定向完全在服务器端进行,浏览器根本不知道服务器已经执行 ...

  9. C#创建datatable

    Asp.net DataTable添加列和行的方法 方法一: DataTable tblDatas = new DataTable("Datas"); DataColumn dc ...

  10. c#检测端口是否被占用

    当我们要创建一个Tcp/Ip Server connection ,我们需要一个范围在1000到65535之间的端口 . 但是本机一个端口只能一个程序监听,所以我们进行本地监听的时候需要检测端口是否被 ...