关于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 仿关机效果的图片层
Dec 26 Javascript
jquery固定底网站底部菜单效果
Aug 13 Javascript
表单验证正则表达式实例代码详解
Nov 09 Javascript
javascript实现动态统计图开发实例
Nov 21 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
Jul 14 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 Javascript
Angular6 正则表达式允许输入部分中文字符
Sep 10 Javascript
vue根据进入的路由进行原路返回的方法
Sep 26 Javascript
微信小程序实现带缩略图轮播效果
Nov 04 Javascript
JS数组扁平化、去重、排序操作实例详解
Feb 24 Javascript
js实现右键弹出自定义菜单
Sep 08 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
基于Windows下Apache PHP5.3.1安装教程
2010/01/08 PHP
android上传图片到PHP的过程详解
2015/08/03 PHP
windows8.1下Apache+Php+MySQL配置步骤
2015/10/30 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
20行代码实现的一个CSS覆盖率测试脚本
2013/07/07 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
2013/09/10 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
2014/03/13 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
2014/05/05 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
jquery Easyui快速开发总结
2015/08/20 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
2016/01/26 Javascript
jQuery使用each方法与for语句遍历数组示例
2016/06/16 Javascript
canvas绘制七巧板
2017/02/03 Javascript
微信小程序 仿猫眼实现实例代码
2017/03/14 Javascript
Vue通过input筛选数据
2020/10/26 Javascript
基于BootStrap的前端分页带省略号和上下页效果
2017/05/18 Javascript
JavaScript输出所选择起始与结束日期的方法
2017/07/12 Javascript
用JS实现简单的登录验证功能
2017/07/28 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
Win10下Python环境搭建与配置教程
2016/11/18 Python
python实现rsa加密实例详解
2017/07/19 Python
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
python实现顺序表的简单代码
2018/09/28 Python
python修改微信和支付宝步数的示例代码
2020/10/12 Python
谈谈对css属性box-sizing的了解
2017/01/04 HTML / CSS
浅谈基于HTML5的在线视频播放方案
2016/02/18 HTML / CSS
阿迪达斯加拿大官网:Adidas加拿大
2016/08/25 全球购物
介绍一下Make? 为什么使用make
2013/12/08 面试题
关于幼儿的自我评价
2013/12/18 职场文书
部队党性分析材料
2014/02/16 职场文书
医生辞职信范文
2015/03/02 职场文书
2016年班主任培训心得体会
2016/01/07 职场文书
2019公司借款合同范本2篇!
2019/07/24 职场文书
导游词之湖北武当山
2019/09/23 职场文书
python 算法题——快乐数的多种解法
2021/05/27 Python