关于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时间日期和毫秒的相互转换
Feb 22 Javascript
javascript重写alert方法的实例代码
Mar 29 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
Apr 14 Javascript
JS+CSS实现表格高亮的方法
Aug 05 Javascript
JavaScript中的await/async的作用和用法
Oct 31 Javascript
jQuery为某个div加入行样式
Jun 09 jQuery
Angular实现的简单查询天气预报功能示例
Dec 27 Javascript
vue强制刷新组件的方法示例
Feb 28 Javascript
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
JS数据类型判断的几种常用方法
Jul 07 Javascript
js实现点击按钮随机生成背景颜色
Sep 05 Javascript
vuex页面刷新导致数据丢失的解决方案
Dec 10 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数据类型之整数类型、浮点数的介绍
2013/04/28 PHP
采用header定义为文件然后readfile下载(隐藏下载地址)
2014/01/31 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
php动态生成缩略图并输出显示的方法
2015/04/20 PHP
php中str_pad()函数用法分析
2017/03/28 PHP
event.srcElement+表格应用
2006/08/29 Javascript
js几个不错的函数 $$()
2006/10/09 Javascript
简单的无缝滚动程序-仅几行代码
2007/05/08 Javascript
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
2008/12/19 Javascript
Javascript 面向对象编程(coolshell)
2012/03/18 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
2013/05/17 Javascript
JQuery获取样式中的background-color颜色值的问题
2013/08/20 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
2014/06/05 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
js实现鼠标点击文本框自动选中内容的方法
2015/08/20 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
2015/10/13 Javascript
javascript每日必学之继承
2016/02/23 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
最常见的左侧分类菜单栏jQuery实现代码
2016/11/28 Javascript
js+html制作简单日历的方法
2017/06/27 Javascript
浅谈在react中如何实现扫码枪输入
2018/07/04 Javascript
JS数组方法concat()用法实例分析
2020/01/18 Javascript
原生js实现密码强度验证功能
2020/03/18 Javascript
举例讲解Python的lambda语句声明匿名函数的用法
2016/07/01 Python
Python制作钉钉加密/解密工具
2016/12/07 Python
关于Python正则表达式 findall函数问题详解
2018/03/22 Python
对python中的float除法和整除法的实例详解
2019/07/20 Python
python使用if语句实现一个猜拳游戏详解
2019/08/27 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
城市规划毕业生求职信
2013/10/10 职场文书
岗位说明书范文
2014/05/07 职场文书
南京市纪委监察局整改方案
2014/09/16 职场文书
机关单位保密工作责任书
2015/05/11 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS
你喜欢篮球吗?Python实现篮球游戏
2021/06/11 Python
Spring Boot 实现 WebSocket
2022/04/30 Java/Android