innerText和textContent对比及使用介绍


Posted in Javascript onFebruary 27, 2013

今天在使用innerText时遇到一个兼容性问题,FireFox不支持innerText方法,查了下MDN,发现FireFox下有个类似的方法,叫textContent,它和IE的innerText类似, 都是用来获取(设置)元素中text的方法。

语法
•设置

element.textContent = “text”;

•获取
var text = element.textContent;

Note: textContent和innerText类似,也会同时获取子元素的text content,比如 
<div>this is <span>a</span> text!</div> 
// div.textContent == "this is a text!"

与innerText的区别
•textContent会获取所有元素的content,包括`<script>`和`<style>`元素
•innerText不会获取hidden元素的content,而textContent不会
•innerText会触发reflow,而textContent不会
•innerText返回值会被格式化,而textContent不会

主流浏览器支持情况
•IE 9+
•Chrome 1+
•FireFox(Gecko)

Javascript 相关文章推荐
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
Jan 15 Javascript
javascript 星级评分效果(手写)
Dec 24 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
Sep 25 Javascript
JS匀速运动演示示例代码
Nov 26 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
May 12 Javascript
jQuery控制cookie过期时间的方法
Apr 07 Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 Javascript
JS数字千分位格式化实现方法总结
Dec 16 Javascript
微信小程序WebSocket实现聊天对话功能
Jul 06 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
Sep 21 Javascript
JS深入学习之数组对象排序操作示例
May 01 Javascript
vue a标签点击实现赋值方式
Sep 07 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
Feb 26 #Javascript
jQuery easyui datagrid动态查询数据实例讲解
Feb 26 #Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
Feb 26 #Javascript
jquery创建一个ajax关键词数据搜索实现思路
Feb 26 #Javascript
jQuery创建平滑的页面滚动(顶部或底部)
Feb 26 #Javascript
JavaScript建立一个语法高亮输入框实现思路
Feb 26 #Javascript
js批量设置样式的三种方法不推荐使用with
Feb 25 #Javascript
You might like
攻克CakePHP系列二 表单数据显示
2008/10/22 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
Zend Framework教程之Application和Bootstrap用法详解
2016/03/10 PHP
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
ThinkPHP实现静态缓存和动态缓存示例代码
2017/05/02 PHP
老生常谈PHP 文件写入和读取(必看篇)
2017/05/22 PHP
Symfony查询方法实例小结
2017/06/28 PHP
Javascript 对象的解释
2008/11/24 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
2011/05/09 Javascript
javascript语言结构小记(一)
2011/09/10 Javascript
js获取当前路径的简单示例代码
2014/01/08 Javascript
jQuery操作select下拉框的text值和value值的方法
2014/05/31 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
2014/07/02 Javascript
AngularJs定制样式插入到ueditor中的问题小结
2016/08/01 Javascript
JS实现快递单打印功能【推荐】
2018/06/21 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
2021/01/25 Javascript
简单使用Python自动生成文章
2014/12/25 Python
python处理大数字的方法
2015/05/27 Python
Python使用email模块对邮件进行编码和解码的实例教程
2016/07/01 Python
python实现感知器算法详解
2017/12/19 Python
Python实现可获取网易页面所有文本信息的网易网络爬虫功能示例
2018/01/15 Python
python实现日常记账本小程序
2018/03/10 Python
python实现C4.5决策树算法
2018/08/29 Python
在python中pandas的series合并方法
2018/11/12 Python
Python学习笔记之lambda表达式用法详解
2019/08/08 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
2016/12/03 HTML / CSS
微软美国官方网站:Microsoft美国
2018/05/10 全球购物
工作会议欢迎词
2014/01/16 职场文书
全民健身日活动方案
2014/01/29 职场文书
儿童生日会策划方案
2014/05/15 职场文书
设计专业毕业生求职信
2014/06/25 职场文书
副乡长群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
民主评议党员个人自我评价
2015/03/03 职场文书
2015年事业单位办公室文员工作总结
2015/04/24 职场文书
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS