关于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操作table示例(个人心得)
Nov 29 Javascript
js使用html()或text()方法获取设置p标签的显示的值
Aug 01 Javascript
node.js下when.js 的异步编程实践
Dec 03 Javascript
2014 HTML5/CSS3热门动画特效TOP10
Dec 07 Javascript
JavaScript中数组添加值和访问值常见问题
Feb 06 Javascript
Bootstrap基本组件学习笔记之面板(14)
Dec 08 Javascript
jQuery实现一个简单的轮播图
Feb 19 Javascript
Vue-Cli中自定义过滤器的实现代码
Aug 12 Javascript
Vue组件开发技巧总结
Mar 04 Javascript
微信小程序实时聊天WebSocket
Jul 05 Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 Javascript
Angular进行简单单元测试的实现方法实例
Aug 16 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
Yii实现文章列表置顶功能示例
2016/10/18 PHP
Javascript中call的两种用法实例
2013/12/13 Javascript
document.forms[].submit()使用介绍
2014/02/19 Javascript
JS中类或对象的定义说明
2014/03/10 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
2015/07/30 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
2015/12/01 Javascript
详解javascript实现自定义事件
2016/01/19 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
2016/05/18 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
2016/09/16 Javascript
浅谈JS中String()与 .toString()的区别
2016/10/20 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
VSCode配置react开发环境的步骤
2017/12/27 Javascript
原生JS实现的简单小钟表功能示例
2018/08/30 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
2019/06/22 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——VP
2018/04/04 DOTA
Python实现的简单发送邮件脚本分享
2014/11/07 Python
提升Python程序运行效率的6个方法
2015/03/31 Python
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
详解Python多线程Selenium跨浏览器测试
2017/04/01 Python
Python找出最小的K个数实例代码
2018/01/04 Python
Python常见字符串操作函数小结【split()、join()、strip()】
2018/02/02 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
pycharm修改界面主题颜色的方法
2019/01/17 Python
Python实现的合并两个有序数组算法示例
2019/03/04 Python
基于Python数据分析之pandas统计分析
2020/03/03 Python
什么是python类属性
2020/06/10 Python
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
优秀的教师个人的中文求职信
2013/09/21 职场文书
口腔医学技术应届生求职信
2013/11/09 职场文书
物流毕业生个人的自我评价
2014/02/13 职场文书
共产党员岗位承诺书
2014/05/29 职场文书
2015年党员公开承诺书范文
2015/01/22 职场文书
Go遍历struct,map,slice的实现
2021/06/13 Golang
python识别围棋定位棋盘位置
2021/07/26 Python
Win11安全功能升级:内置防网络钓鱼功能
2022/04/08 数码科技
Nginx报错104:Connection reset by peer问题的解决及分析
2022/07/23 Servers