关于Mozilla浏览器不支持innerText的解决办法


Posted in Javascript onJanuary 01, 2011

比如:
<p id="test"><strong><font color="red">Hello</font> , world!</strong></p>
我们使用代码:alert((document.getElementById("test")).innerText)

在IE、Chrome中,均能获取到“Hello , world!”,但是在Firefox中,却得到了"undefined"。其原为是firefox中并不支持元素的innerText这个属性。当然,在网络上已经有很多好的方法来解决这个问题了,比如给HTMLElement原型添加一个属性(读取器)。

然而,所有文本节点都具有nodeValue属性,而且所有浏览器都是支持的。我们可以尝试用这种方法去读取一个HTML元素内的文本。
下面的原码,正好解决了这个问题:

function getText(e) { 
//若浏览器支持元素的innerText属性,则直接返回该属性 
if(e.innerText) { return e.innerText; } 
//不支持innerText属性时,用以下方法处理 
var t = ""; //如果传入的是一个元素对象,则继续访问其子元素 
e = e.childNodes || e ; 
//遍历子元素的所有子元素 
for(var i=0; i<e.length; i++) { 
//若为文本元素,则累加到字符串t中。 
if(e[i].nodeType == 3) { t += e[i].nodeValue; } 
//否则递归遍历元素的所有子节点 
else { t += getText(e[i].childNodes); } 
} 
return t; 
}

有了这个函数,我们再来看看如下DOM结构:
<p id="test"><strong><font color="red">Hello</font> , world!</strong></p>
然后,我们用:
alert(getText(document.getElementById("test"));
在IE、Chrome、Firefox中均能获取到 "Hello, world!"
Javascript 相关文章推荐
小型js框架veryide.librar源代码
Mar 05 Javascript
jQuery 对象中的类数组操作
Apr 27 Javascript
input禁止键盘及中文输入,但可以点击
Feb 13 Javascript
JavaScript的RequireJS库入门指南
Jul 01 Javascript
浅析ES6的八进制与二进制整数字面量
Aug 30 Javascript
浅谈JavaScript作用域和闭包
Sep 18 Javascript
基于vue.js快速搭建图书管理平台
Oct 29 Javascript
gulp安装以及打包合并的方法教程
Nov 19 Javascript
js 索引下标之li集合绑定点击事件
Jan 12 Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
Jan 20 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
Mar 15 Javascript
Node.js API详解之 timer模块用法实例分析
May 07 Javascript
Js event事件在IE、FF兼容性问题
Jan 01 #Javascript
javaScript同意等待代码实现心得
Jan 01 #Javascript
javascript判断用户浏览器插件安装情况的代码
Jan 01 #Javascript
javascript 事件绑定问题
Jan 01 #Javascript
javascript跨域刷新实现代码
Jan 01 #Javascript
extjs中grid中嵌入动态combobox的应用
Jan 01 #Javascript
js注意img图片的onerror事件的分析
Jan 01 #Javascript
You might like
基于mysql的论坛(7)
2006/10/09 PHP
PHP的反射类ReflectionClass、ReflectionMethod使用实例
2014/08/05 PHP
php常用的url处理函数总结
2014/11/19 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
php探针使用原理和技巧讲解
2019/09/17 PHP
我也种棵OO树JXTree[js+css+xml]
2007/04/02 Javascript
jquery选择器原理介绍($()使用方法)
2014/03/25 Javascript
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
javascript 动态创建表格
2015/01/08 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
2016/02/19 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
微信小程序 实例开发总结
2017/04/26 Javascript
jQuery:unbind方法的使用详解
2017/08/14 jQuery
Nodejs 复制文件/文件夹的方法
2017/08/24 NodeJs
ES6入门教程之Array.from()方法
2019/03/23 Javascript
[00:29]2019完美世界全国高校联赛(秋季赛)总决赛海口落幕
2019/12/10 DOTA
pyramid配置session的方法教程
2013/11/27 Python
Python中的字符串替换操作示例
2016/06/27 Python
django请求返回不同的类型图片json,xml,html的实例
2018/05/22 Python
Python的垃圾回收机制详解
2019/08/28 Python
Python新手学习raise用法
2020/06/03 Python
在Keras中利用np.random.shuffle()打乱数据集实例
2020/06/15 Python
python interpolate插值实例
2020/07/06 Python
新西兰廉价汽车租赁:Snap Rentals
2018/09/14 全球购物
Currentbody澳大利亚:美容仪专家
2019/11/11 全球购物
递归计算如下递归函数的值(斐波拉契)
2012/02/04 面试题
JPA的特点
2014/10/25 面试题
专科毕业生就业推荐信
2013/11/01 职场文书
公司领导推荐信
2013/11/12 职场文书
物业管理员岗位职责范文
2013/11/25 职场文书
国际贸易专业求职信
2014/06/04 职场文书
纪念九一八事变演讲稿1000字
2014/09/14 职场文书
Requests什么的通通爬不了的Python超强反爬虫方案!
2021/05/20 Python
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL
Python中tqdm的使用和例子
2022/09/23 Python