关于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 相关文章推荐
How to Auto Include a Javascript File
Feb 02 Javascript
js form 验证函数 当前比较流行的错误提示
Jun 23 Javascript
用jquery和json从后台获得数据集的代码
Nov 07 Javascript
js实现杯子倒水问题自动求解程序
Mar 25 Javascript
JS中setTimeout()的用法详解
Apr 14 Javascript
jQuery的事件预绑定
Dec 05 Javascript
Vue+axios 实现http拦截及路由拦截实例
Apr 25 Javascript
详解Angular-Cli中引用第三方库
May 21 Javascript
p5.js入门教程之键盘交互
Mar 19 Javascript
前后端常见的几种鉴权方式(小结)
Aug 04 Javascript
Vue 组件复用多次自定义参数操作
Jul 27 Javascript
详解JavaScript中的this指向问题
Feb 05 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
PHP图片上传代码
2013/11/04 PHP
php实现的IMEI限制的短信验证码发送类
2015/05/05 PHP
浅谈php处理后端&amp;接口访问超时的解决方法
2016/10/29 PHP
thinkPHP+ajax实现统计页面pv浏览量的方法
2017/03/15 PHP
使用Javascript和DOM Interfaces来处理HTML
2006/10/09 Javascript
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
2009/04/07 Javascript
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
了解一点js的Eval函数
2012/07/26 Javascript
Express.JS使用详解
2014/07/17 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
js获取form的方法
2015/05/06 Javascript
JavaScript操作XML文件之XML读取方法
2015/06/09 Javascript
jQuery如何封装输入框插件
2016/08/19 Javascript
JavaScript reduce和reduceRight详解
2016/10/24 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
2016/11/16 Javascript
zTree jQuery 树插件的使用(实例讲解)
2017/09/25 jQuery
在Vue环境下利用worker运行interval计时器的步骤
2019/08/01 Javascript
JS实现无限轮播无倒退效果
2020/09/21 Javascript
[03:20]次级联赛厮杀超职业 现超级兵对拆世纪大战
2014/10/30 DOTA
Python实现的端口扫描功能示例
2018/04/08 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
企业演讲比赛主持词
2014/03/18 职场文书
市场营销毕业生自荐信范文
2014/04/01 职场文书
大学生简短的自我评价
2014/09/12 职场文书
授权委托书
2014/09/17 职场文书
副总经理党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/06 职场文书
房屋授权委托书范本
2014/10/07 职场文书
道路交通事故赔偿协议书
2014/10/24 职场文书
2015元旦标语横幅
2014/12/09 职场文书
2015年化验员工作总结
2015/04/10 职场文书
gateway网关接口请求的校验方式
2021/07/15 Java/Android
python之基数排序的实现
2021/07/26 Python
Hive常用日期格式转换语法
2022/06/25 数据库