关于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 相关文章推荐
几个高效,简洁的字符处理函数
Apr 12 Javascript
javascript带回调函数的异步脚本载入方法实例分析
Jul 02 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
Aug 30 Javascript
WEB前端实现裁剪上传图片功能
Oct 17 Javascript
Javascript 对cookie操作详解及实例
Dec 29 Javascript
canvas实现图像布局填充功能
Feb 06 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
Sep 10 Javascript
JS动画定时器知识总结
Mar 23 Javascript
vue-cli监听组件加载完成的方法
Sep 07 Javascript
vue-router的HTML5 History 模式设置
Sep 08 Javascript
vue-cli3 karma单元测试的实现
Jan 18 Javascript
微信小程序8种数据通信的方式小结
Feb 03 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
在任意字符集下正常显示网页的方法一
2007/04/01 PHP
PHP判断是否有Get参数的方法
2014/05/05 PHP
ThinkPHP中pathinfo的访问模式、路径访问模式及URL重写总结
2014/08/23 PHP
跟我学Laravel之视图 &amp; Response
2014/10/15 PHP
Yii2 队列 shmilyzxt/yii2-queue 简单概述
2017/08/02 PHP
PHP实现图的邻接矩阵表示及几种简单遍历算法分析
2017/11/24 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
CSS+Jquery实现页面圆角框方法大全
2009/12/24 Javascript
js显示时间 js显示最后修改时间
2013/01/02 Javascript
jquery 面包屑导航 具体实现
2013/06/05 Javascript
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
基于JavaScript 下namespace 功能的简单分析
2013/07/05 Javascript
JavaScript中读取和保存文件实例
2014/05/08 Javascript
js生成的验证码的实现与技术分析
2014/09/17 Javascript
jQuery实现购物车表单自动结算效果实例
2015/08/10 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
React学习笔记之事件处理(二)
2017/07/02 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
2020/05/13 Javascript
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
浅谈numpy数组中冒号和负号的含义
2018/04/18 Python
PyCharm安装第三方库如Requests的图文教程
2018/05/18 Python
用Pycharm实现鼠标滚轮控制字体大小的方法
2019/01/15 Python
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
linux面试题参考答案(10)
2013/11/04 面试题
兵马俑的导游词
2015/02/02 职场文书
社团个人总结范文
2015/03/05 职场文书
担保书格式范文
2015/09/22 职场文书
XX部保密工作制度范本
2019/08/27 职场文书
正确的理解和使用Django信号(Signals)
2021/04/14 Python
js中Object.create实例用法详解
2021/10/05 Javascript
Minikube搭建Kubernetes集群
2022/03/31 Servers
Windows Server 2012配置DNS服务器的方法
2022/04/29 Servers
python标准库ElementTree处理xml
2022/05/20 Python