关于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 相关文章推荐
面向对象Javascript核心支持代码分享
May 23 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
Jul 21 Javascript
jQuery实现表格行上移下移和置顶的方法
May 22 Javascript
javascript学习指南之回调问题
Apr 23 Javascript
JavaScript中的冒泡排序法
Aug 03 Javascript
基于Vue实现支持按周切换的日历
Sep 24 Javascript
node.js中使用Export和Import的方法
Sep 18 Javascript
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
JS函数节流和防抖之间的区分和实现详解
Jan 11 Javascript
vue router 跳转时打开新页面的示例方法
Jul 28 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
Sep 22 Javascript
Vue操作Storage本地化存储
Apr 29 Vue.js
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如何调用webservice应用介绍
2012/11/24 PHP
php断点续传之如何分割合并文件
2014/03/22 PHP
php创建桌面快捷方式实现方法
2015/12/31 PHP
Yii视图操作之自定义分页实现方法
2016/07/14 PHP
为指定元素增加样式的js代码
2009/12/09 Javascript
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
2010/04/29 Javascript
jquery下checked取值问题的解决方法
2012/08/09 Javascript
javascript实现删除前弹出确认框
2015/06/04 Javascript
基于javascript实现根据身份证号码识别性别和年龄
2016/01/22 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
2017/02/16 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
2017/07/07 Javascript
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
基于Koa2写个脚手架模拟接口服务的方法
2018/11/27 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
2019/01/21 Javascript
粗略分析Python中的内存泄漏
2015/04/23 Python
浅谈Python实现2种文件复制的方法
2018/01/19 Python
python将文本中的空格替换为换行的方法
2018/03/19 Python
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
说说如何遍历Python列表的方法示例
2019/02/11 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
PyQt5 closeEvent关闭事件退出提示框原理解析
2020/01/08 Python
大数据分析用java还是Python
2020/07/06 Python
同程旅游英文网站:LY.com
2018/11/13 全球购物
Jones Bootmaker官网:优质靴子和鞋子在线
2020/11/30 全球购物
介绍一下代理模式(Proxy)
2014/10/17 面试题
南京某公司笔试题
2013/01/27 面试题
竞选部长演讲稿
2014/04/26 职场文书
公司员工宿舍管理制度
2015/08/03 职场文书
如何理解Vue简单状态管理之store模式
2021/05/15 Vue.js
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python
springmvc直接不经过controller访问WEB-INF中的页面问题
2022/02/24 Java/Android
阿里云服务器Ubuntu 20.04上安装Odoo 15
2022/05/20 Servers