textContent 与innerText
转自下面这位大神:
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去除所有标签后的内容
会将<这些进行换码,直接剔除html的语义化标签
会保留多个空格
不会将<br />进行转换
第三:对应script标签里面的内容
innerText不能返回
textContent可以
textContent 与innerText的更多相关文章
- textContent、innerText的用法,在文档中插入纯文本
有时候需要查询纯文本形式的元素内容,或者在文档中插入纯文本.标准的方法是用Node的textContent属性来实现: var para = document.getElementsByTagName ...
- textContent、innerText 以及Event事件兼容性问题
今天在完成前端的简单练习时发现了一些兼容性的问题,百度后得以解决. 这里主要讨论Firefox与Chrome的兼容性问题. textContent与 innerText 在javascript中, 为 ...
- textContent和innerText属性的区别
原文摘自 textContent和innerText属性的区别 <!DOCTYPE html> <html> <head> <meta charset=&qu ...
- JS魔法堂:被玩坏的innerHTML、innerText、textContent和value属性
一.前言 由于innerText并非W3C标准属性,因此我们无法在FireFox中使用它(修正:FF45+已经支持innerText属性),一般情况下我们可以使用textContent来代替,但它两者 ...
- innerHTML,innertext ,textcontent,write()
innerhtml属于对象的一个属性,一般用于向已经存在的标签中写入内容,或者读取标签的内容. innertext属于对象的一个属性,一般只能用于写入内容,或者读取内容,不能读取dom 中的标签,且只 ...
- textContent、innerHTML、innerText、outerText、outerHTML、nodeValue使用场景和区别
今天要讲的这些属性都可以用来获取某个元素的内容,你可能会觉得不可思议,或是说上一句"丧心病狂"也.但当你看完以下内容后,会发现除outerText无用外,其他的都有各自的使用场景, ...
- [转]被玩坏的innerHTML、innerText、textContent和value属性
一.前言 由于innerText并非W3C标准属性,因此我们无法在FireFox中使用它,一般情况下我们可以使用textContent来代替,但它两者是否就能完全等同呢?在坑爹的表单元素(如input ...
- vue-learning:12 - 2 - 区分:outerHTML - innerTHML - outerText - innerText - textContent
区分:outerHTML - innerTHML - outerText - innerText - textContent 获取值 <div id="outer"> ...
- DOM 操作内容 innerText/innerHTML
DOM 操作内容 innerText/innerHTML innerText属性(firefox不支持,可用 textContent)var div = document.getElementById ...
随机推荐
- HttpURLConnection发送和接受返回值
URL url = new URL(sb.toString());//请求的地址 HttpURLConnection connection = (HttpURLConnection) url.open ...
- 数据库连接JDBC和数据库连接池C3P0自定义的java封装类
数据库连接JDBC和数据库连接池C3P0自定义的java封装类 使用以下的包装类都需要自己有JDBC的驱动jar包: 如 mysql-connector-java-5.1.26-bin.jar(5.1 ...
- Python学习路程day11
SqlAlchemy ORM SQLAlchemy是Python编程语言下的一款ORM框架,该框架建立在数据库API之上,使用关系对象映射进行数据库操作,简言之便是:将对象转换成SQL,然后使用数据A ...
- linux系统下php安装mbstring扩展的二种方法
.执行 复制代码代码如下: yum install php-mbstring 2. 修改php.ini (这一步非常重要, 部分lxadmin版本无法自动修改) 复制代码代码如下: echo ‘ext ...
- HDU 3652 B-number
也是数位dp.考虑反面会简单很多. #include<iostream> #include<cstdio> #include<cstring> #include&l ...
- Python框架、库以及软件资源汇总
转自:http://developer.51cto.com/art/201507/483510.htm 很多来自世界各地的程序员不求回报的写代码为别人造轮子.贡献代码.开发框架.开放源代码使得分散在世 ...
- JM8.6学习
1. vs2010 设置参数 编译运行JM8.6 (参考http://bbs.chinavideo.org/forum.php?mod=viewthread&tid=15695&hig ...
- dyld: Symbol not found: _OBJC_CLASS_$_NSURLSessionDataTask
dyld: Symbol not found: _OBJC_CLASS_$_NSURLSessionDataTask Referenced from: /var/mobile/Applicatio ...
- PHP中常用的函数
1.php 字符串截取函数 2.php取得当前时间函数 3.php 字符串长度函数 4.几种php 删除数组元素方法 5.php中var_dump()函数的详解说明 6.PHP preg_match正 ...
- appserv升级php
安装thinkphp的时候提示必须要php5.3及以上 本地测试服务器使用的是appserv集成环境 所以要单独升级php 首先到官网下载http://php.net/downloads.php wi ...