关于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面向对象(极简主义法minimalist approach)
Jul 17 Javascript
js遍历子节点子元素附属性及方法
Aug 19 Javascript
javascript实现下拉提示选择框
Dec 29 Javascript
JS+CSS3制作炫酷的弹窗效果
Nov 08 Javascript
详解jQuery简单的表单应用
Dec 16 Javascript
详解JavaScript中this的指向问题
Jan 20 Javascript
JavaScript实现类似淘宝的购物车效果
Mar 16 Javascript
基于jQuery封装的分页组件
Jun 26 jQuery
Vue ElementUI之Form表单验证遇到的问题
Aug 21 Javascript
JS异步函数队列功能实例分析
Nov 28 Javascript
Vue 实现展开折叠效果的示例代码
Aug 27 Javascript
Vue文本模糊匹配功能如何实现
Jul 30 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+JS无限级可伸缩菜单详解(简单易懂)
2007/01/02 PHP
用PHP提取中英文词语以及数字的首字母的方法介绍
2013/04/23 PHP
apache中为php 设置虚拟目录
2014/12/17 PHP
php设计模式之单例模式代码
2016/06/11 PHP
PHP读取目录树的实现方法分析
2019/03/22 PHP
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
2010/03/23 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
jQuery LigerUI 使用教程表格篇(1)
2012/01/18 Javascript
javascript实现base64 md5 sha1 密码加密
2015/09/09 Javascript
jQuery实现图片走马灯效果的原理分析
2016/01/16 Javascript
Jquery操作cookie记住用户名
2016/03/29 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
2016/04/06 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
2016/06/06 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
2016/07/14 Javascript
AngularJS ng-mousedown 指令
2016/08/02 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
js实现简易聊天对话框
2017/08/17 Javascript
详解如何用VUE写一个多用模态框组件模版
2018/09/27 Javascript
jQuery轻量级表单模型验证插件
2018/10/15 jQuery
采用Psyco实现python执行速度提高到与编译语言一样的水平
2014/10/11 Python
Python实现的ini文件操作类分享
2014/11/20 Python
python抓取最新博客内容并生成Rss
2015/05/17 Python
flask框架中勾子函数的使用详解
2018/08/01 Python
python 梯度法求解函数极值的实例
2019/07/10 Python
python3获取当前目录的实现方法
2019/07/29 Python
Python写出新冠状病毒确诊人数地图的方法
2020/02/12 Python
Python LMDB库的使用示例
2021/02/14 Python
css3实现图片遮罩效果鼠标hover以后出现文字
2013/11/05 HTML / CSS
CSS3的transition和animation的用法实例介绍
2014/08/20 HTML / CSS
科茨沃尔德家居商店:Scotts of Stow
2018/06/29 全球购物
倩碧英国官网:Clinique英国
2018/08/10 全球购物
应届毕业生应聘自荐信
2013/12/07 职场文书
优秀教师先进个人事迹材料
2014/08/31 职场文书
爱国影片观后感
2015/06/18 职场文书
会计做账心得体会
2016/01/22 职场文书
《索溪峪的野》教学反思
2016/02/19 职场文书