关于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调试logger组件实现代码
Nov 20 Javascript
JS焦点图切换,上下翻转
May 12 Javascript
jquery $.ajax相关用法分享
Mar 16 Javascript
浅析ajax请求json数据并用js解析(示例分析)
Jul 13 Javascript
Fullpage.js固定导航栏-实现定位导航栏
Mar 17 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
Sep 19 Javascript
JS验证图片格式和大小并预览的简单实例
Oct 11 Javascript
javascript回调函数详解
Feb 06 Javascript
关于jquery layui弹出层的使用方法
Apr 21 jQuery
多个vue子路由文件自动化合并的方法
Sep 03 Javascript
详解JavaScript执行模型
Nov 16 Javascript
编写v-for循环的技巧汇总
Dec 01 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
php类
2006/11/27 PHP
PHP中去掉字符串首尾空格的方法
2012/05/19 PHP
php提取字符串中网站url地址的方法
2014/12/03 PHP
PHP观察者模式原理与简单实现方法示例
2017/08/25 PHP
PHP获取本周所有日期或者最近七天所有日期的方法
2018/06/20 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
URI、URL和URN之间的区别与联系
2006/12/20 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
jQuery对象的length属性用法实例
2014/12/27 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
2016/08/11 Javascript
js实现加载更多功能实例
2016/10/27 Javascript
Vue.js使用v-show和v-if的注意事项
2016/12/13 Javascript
jQuery 获取select选中值及清除选中状态
2016/12/13 Javascript
JavaScrpt判断一个数是否是质数的实例代码
2017/06/11 Javascript
详解webpack 热更新优化
2018/09/13 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
2018/12/26 Javascript
VSCode插件安装完成后的配置(常用配置)
2020/08/24 Javascript
Python脚本实现下载合并SAE日志
2015/02/10 Python
flask框架实现连接sqlite3数据库的方法分析
2018/07/16 Python
python中单例常用的几种实现方法总结
2018/10/13 Python
Python学习笔记之pandas索引列、过滤、分组、求和功能示例
2019/06/03 Python
python中pytest收集用例规则与运行指定用例详解
2019/06/27 Python
Python logging设置和logger解析
2019/08/28 Python
python实现自动化报表功能(Oracle/plsql/Excel/多线程)
2019/12/02 Python
python实现高斯投影正反算方式
2020/01/17 Python
Python如何访问字符串中的值
2020/02/09 Python
YOINS官网:时尚女装网上购物
2017/03/17 全球购物
男女时尚与复古风格在线购物:RoseGal(全球免费送货)
2017/07/19 全球购物
宝信软件JAVA工程师面试经历
2012/08/19 面试题
中科创达面试题
2016/12/28 面试题
探矿工程师自荐信
2014/01/24 职场文书
二年级语文教学反思
2014/02/02 职场文书
党委班子纠正“四风”问题整改措施
2014/10/28 职场文书
军训新闻稿范文
2015/07/17 职场文书
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技