关于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 相关文章推荐
如何在Web页面上直接打开、编辑、创建Office文档
Mar 12 Javascript
Ajax搜索结果页面下方的分页按钮的生成
Apr 05 Javascript
jquery遍历select元素(实例讲解)
Dec 31 Javascript
node.js中的buffer.toString方法使用说明
Dec 14 Javascript
嵌入式iframe子页面与父页面js通信的方法
Jan 20 Javascript
整理Javascript事件响应学习笔记
Dec 02 Javascript
JS数组合并push与concat区别分析
Dec 17 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
Mar 08 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
Jun 13 Javascript
JS异步错误捕获的一些事小结
Apr 26 Javascript
js实现无缝滚动双图切换效果
Jul 09 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
php5.3 goto函数介绍和示例
2014/03/21 PHP
php简单判断文本编码的方法
2015/07/30 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
javascript得到XML某节点的子节点个数的脚本
2008/10/11 Javascript
jquery tab标签页的制作
2010/05/10 Javascript
javascript Array.prototype.slice使用说明
2010/10/11 Javascript
javascript之querySelector和querySelectorAll使用介绍
2011/12/20 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
Extjs 点击复选框在表格中增加相关信息行
2016/07/12 Javascript
jQuery 插件封装的方法
2016/11/16 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
2017/06/08 jQuery
angular select 默认值设置方法
2017/06/23 Javascript
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
JavaScript命名空间模式实例详解
2019/06/20 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
2019/07/07 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
原生js生成图片验证码
2020/10/11 Javascript
[03:09]显微镜下的DOTA2第一期——带你走进华丽的DOTA2世界
2014/06/20 DOTA
python操作字典类型的常用方法(推荐)
2016/05/16 Python
基于Python的XSS测试工具XSStrike使用方法
2017/07/29 Python
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
Python数据结构之哈夫曼树定义与使用方法示例
2018/04/22 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
python3爬虫怎样构建请求header
2018/12/23 Python
详解用python写一个抽奖程序
2019/05/10 Python
python导入pandas具体步骤方法
2019/06/23 Python
PyCharm中代码字体大小调整方法
2019/07/29 Python
python扫描线填充算法详解
2020/02/19 Python
Python创建临时文件和文件夹
2020/08/05 Python
python生成word合同的实例方法
2021/01/12 Python
个人自我鉴定怎么写
2013/10/28 职场文书
致800米运动员广播稿
2014/02/16 职场文书
学习退步检讨书
2014/09/28 职场文书
模范教师材料大全
2014/12/16 职场文书
2015年质检工作总结
2015/05/04 职场文书