关于Mozilla浏览器不支持innerText的解决办法

 更新时间:2023年06月19日 12:53:34   投稿:mdxy-dxy  
在各大浏览器中,除Mozilla浏览器外,几乎都支持一个元素的属性:innerText。我们可以通过它来快速获取某个元素的内的文本。

在各大浏览器中,除Mozilla浏览器外,几乎都支持一个元素的属性:innerText。我们可以通过它来快速获取某个元素的内的文本。

比如:

<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!"

下面分享一下另外一个函数

try{
	HTMLElement.prototype.__defineGetter__
	(
	"innerText",
	function ()
	{
		var anyString = "";
		var childS = this.childNodes;
			for(var i=0; i<childS.length; i++)
			{
				if(childS[i].nodeType==1)
				anyString += childS[i].tagName=="BR" ? '\n' : childS[i].innerText;
				else if(childS[i].nodeType==3)
				anyString += childS[i].nodeValue;
			}
			return anyString;
	}
	); 
}
catch(e){}

到此这篇关于关于Mozilla浏览器不支持innerText的解决办法的文章就介绍到这了,更多相关不支持innerText内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS如何使用剪贴板操作Clipboard API

    JS如何使用剪贴板操作Clipboard API

    浏览器允许JavaScript脚本读写剪贴板,自动复制或粘贴内容。一般来说,脚本不应该改动用户的剪贴板,以免不符合用户的预期。但是,有些时候这样做确实能够带来方便,比如"一键复制"功能,用户点击一下按钮,指定的内容就自动进入剪贴板。本文将介绍3种方法来实现。
    2021-05-05
  • js实现上一页下一页的效果【附代码】

    js实现上一页下一页的效果【附代码】

    下面小编就为大家带来一篇js实现上一页下一页的效果【附代码】。小编觉得非常不错。现在分享给大家。希望能给大家一个参考。
    2016-03-03
  • Javascript验证Visa和MasterCard信用卡号的方法

    Javascript验证Visa和MasterCard信用卡号的方法

    这篇文章主要介绍了Javascript验证Visa和MasterCard信用卡号的方法,涉及javascript正则验证的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • JS数据类型STRING使用实例解析

    JS数据类型STRING使用实例解析

    这篇文章主要介绍了JS数据类型STRING使用实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-12-12
  • js简单实现根据身份证号码识别性别年龄生日

    js简单实现根据身份证号码识别性别年龄生日

    根据身份证号码识别性别年龄生日,目前就有一个这样的需求,那么接下来为大家介绍下使用js是如何实现的,感兴趣的朋友不要错过
    2013-11-11
  • 解决ie11 SCRIPT5011:不能执行已释放Script的代码问题

    解决ie11 SCRIPT5011:不能执行已释放Script的代码问题

    这篇文章主要介绍了ie11 SCRIPT5011:不能执行已释放Script的代码 ,需要的朋友可以参考下
    2019-05-05
  • js树插件zTree获取所有选中节点数据的方法

    js树插件zTree获取所有选中节点数据的方法

    这篇文章主要介绍了js树插件zTree获取所有选中节点数据的方法,是对js树插件zTree非常实用的操作,需要的朋友可以参考下
    2015-01-01
  • nestjs实现图形校验和单点登录的示例代码

    nestjs实现图形校验和单点登录的示例代码

    本文主要介绍了nestjs实现图形校验和单点登录的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • javascript中的数据类型检测方法详解

    javascript中的数据类型检测方法详解

    这篇文章主要介绍了javascript中的数据类型检测方法,结合实例形式分析了javascript数据类型并总结分析了常见的数据类型检测操作技巧,需要的朋友可以参考下
    2019-08-08
  • JavaScript报错:Uncaught ReferenceError: XYZ is not defined的解决方法

    JavaScript报错:Uncaught ReferenceError: XYZ is&

    在 JavaScript 编程中,“Uncaught ReferenceError: XYZ is not defined” 是一种常见的错误,这种错误通常发生在试图使用一个未声明的变量或标识符时,故本文给大家介绍了JavaScript报错:Uncaught ReferenceError: XYZ is not defined的解决方法,需要的朋友可以参考下
    2024-07-07

最新评论