关于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 相关文章推荐
初试jQuery EasyUI 使用介绍
Apr 01 Javascript
基于MooTools的很有创意的滚动条时钟动画
Nov 14 Javascript
javascript实现跳转菜单的具体方法
Jul 05 Javascript
非常好用的JsonToString 方法 简单实例
Jul 18 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
Sep 15 Javascript
详解JS正则replace的使用方法
Mar 06 Javascript
利用angularjs1.4制作的简易滑动门效果
Feb 28 Javascript
vue项目引入Iconfont图标库的教程图解
Oct 24 Javascript
apicloud拉起小程序并传递参数的方法示例
Nov 21 Javascript
vue中axios实现数据交互与跨域问题
May 12 Javascript
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
vue实现按钮切换图片
Jan 20 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
迅雷下载《中学科技》怀旧期刊下载
2021/02/27 无线电
解析:使用php mongodb扩展时 需要注意的事项
2013/06/18 PHP
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
详解PHP中的null合并运算符
2015/12/30 PHP
如果文字过长,则将过长的部分变成省略号显示
2006/06/26 Javascript
jQuery 快速结束当前正在执行的动画
2013/11/20 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
jQuery.each使用详解
2015/07/07 Javascript
JavaScript动态改变div属性的实现方法
2015/07/22 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
老生常谈JQuery data方法的使用
2016/09/09 Javascript
JS使用正则表达式验证身份证号码
2017/06/23 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
vue+axios实现post文件下载
2019/09/25 Javascript
JS工厂模式开发实践案例分析
2019/10/17 Javascript
Javascript confirm多种使用方法解析
2020/09/25 Javascript
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
[01:11:11]Alliance vs RNG 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
Python构造函数及解构函数介绍
2015/02/26 Python
Python基于Tkinter的HelloWorld入门实例
2015/06/17 Python
Python Paramiko模块的使用实际案例
2018/02/01 Python
使用python对文件中的单词进行提取的方法示例
2018/12/21 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
python的pip有什么用
2020/06/17 Python
HTML5实现获取地理位置信息并定位功能
2015/04/25 HTML / CSS
详解HTML5中download属性的应用
2015/08/06 HTML / CSS
施华洛世奇加拿大官网:SWAROVSKI加拿大
2018/06/03 全球购物
医院门卫岗位职责
2013/12/30 职场文书
大学社团活动策划书
2014/01/26 职场文书
预防传染病方案
2014/06/14 职场文书
党支部创先争优活动总结
2014/08/28 职场文书
2016年大学校运会广播稿件
2015/12/21 职场文书
python中的sys模块和os模块
2022/03/20 Python
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android