关于IE中getElementsByClassName不能用的问题解决方法


Posted in Javascript onAugust 26, 2013

今天使用getElementsByClassName写了段小程序,满怀欣喜的准备去测试,在ff,谷歌等主流浏览器上测试都没问题,在IE9上也没问题,在IE6、8中测试的时候就出现问题了,浏览器报错。纠结了下代码,貌似没问题,果断找度娘。。。终于发现问题所在,然来是IE6、8中不支持getElementsByClassName这种方法。随后在网上搜索解决方法,找到了一个比较好的方法,是个老外写的一个方法,定睛一看居然是05年的问题了。。。先上代码:

* 
Developed by Robert Nyman, http://www.robertnyman.com 
Code/licensing: http://code.google.com/p/getelementsbyclassname/ 
*/ 
var getElementsByClassName = function (className, tag, elm){ 
if (document.getElementsByClassName) { 
getElementsByClassName = function (className, tag, elm) { 
elm = elm || document; 
var elements = elm.getElementsByClassName(className), 
nodeName = (tag)? new RegExp("\\b" + tag + "\\b", "i") : null, 
returnElements = [], 
current; 
for(var i=0, il=elements.length; i<il; i+=1){ 
current = elements[i]; 
if(!nodeName || nodeName.test(current.nodeName)) { 
returnElements.push(current); 
} 
} 
return returnElements; 
}; 
} 
else if (document.evaluate) { 
getElementsByClassName = function (className, tag, elm) { 
tag = tag || "*"; 
elm = elm || document; 
var classes = className.split(" "), 
classesToCheck = "", 
xhtmlNamespace = "http://www.w3.org/1999/xhtml", 
namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace)? xhtmlNamespace : null, 
returnElements = [], 
elements, 
node; 
for(var j=0, jl=classes.length; j<jl; j+=1){ 
classesToCheck += "[contains(concat(' ', @class, ' '), ' " + classes[j] + " ')]"; 
} 
try { 
elements = document.evaluate(".//" + tag + classesToCheck, elm, namespaceResolver, 0, null); 
} 
catch (e) { 
elements = document.evaluate(".//" + tag + classesToCheck, elm, null, 0, null); 
} 
while ((node = elements.iterateNext())) { 
returnElements.push(node); 
} 
return returnElements; 
}; 
} 
else { 
getElementsByClassName = function (className, tag, elm) { 
tag = tag || "*"; 
elm = elm || document; 
var classes = className.split(" "), 
classesToCheck = [], 
elements = (tag === "*" && elm.all)? elm.all : elm.getElementsByTagName(tag), 
current, 
returnElements = [], 
match; 
for(var k=0, kl=classes.length; k<kl; k+=1){ 
classesToCheck.push(new RegExp("(^|\\s)" + classes[k] + "(\\s|$)")); 
} 
for(var l=0, ll=elements.length; l<ll; l+=1){ 
current = elements[l]; 
match = false; 
for(var m=0, ml=classesToCheck.length; m<ml; m+=1){ 
match = classesToCheck[m].test(current.className); 
if (!match) { 
break; 
} 
} 
if (match) { 
returnElements.push(current); 
} 
} 
return returnElements; 
}; 
} 
return getElementsByClassName(className, tag, elm); 
};

具体怎么使用可以去看他里面的使用方法。

使用这个方法之后,IE6、8中能显示了,但是还是有个随机的问题,有时刷新几次又会报错,暂时无解了。然后我想用jquery能不能解决这个刷新报错的问题,当然用jquery也能替代getElementsByClassName这个方法,具体怎么用这里就不作介绍了。然而事实终不能如人愿,刷新还是会有问题,而且报错是随机的,有时第一次加载过程中就报错,有时刷新几次才报错。大侠们。求解决。

Javascript 相关文章推荐
学习ExtJS TextField常用方法
Oct 07 Javascript
jQuery MD5加密实现代码
Mar 15 Javascript
jquery中ajax学习笔记3
Oct 16 Javascript
在javascript中执行任意html代码的方法示例解读
Dec 25 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
Jun 23 Javascript
jQuery控制TR显示隐藏的三种常用方法
Aug 21 Javascript
浅谈js的url解析函数封装
Jun 28 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
基于node下的http小爬虫的示例代码
Jan 11 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
Nov 05 Javascript
超简单的微信小程序轮播图
Nov 22 Javascript
基于vue--key值的特殊用处详解
Jul 31 Javascript
关于Jquery操作Cookie取值错误的解决方法
Aug 26 #Javascript
jquery弹出框的用法示例(2)
Aug 26 #Javascript
jquery弹出框的用法示例(一)
Aug 26 #Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
Aug 26 #Javascript
使用js实现雪花飘落效果
Aug 26 #Javascript
JS预览图像将本地图片显示到浏览器上
Aug 25 #Javascript
点击弹出层外区域关闭弹出层jquery特效示例
Aug 25 #Javascript
You might like
ThinkPHP3.1新特性之查询条件预处理简介
2014/06/19 PHP
十幅图告诉你什么是PHP引用
2015/02/22 PHP
Javascript 生成指定范围数值随机数
2009/01/09 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
2012/12/28 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
2013/05/07 Javascript
jQuery中$.fn的用法示例介绍
2013/11/05 Javascript
Javascript实现返回上一页面并刷新的小例子
2013/12/11 Javascript
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
JQuery中层次选择器用法实例详解
2015/05/18 Javascript
node.js操作mysql(增删改查)
2015/07/24 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
2015/08/27 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
2016/01/14 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
2016/07/18 Javascript
如何使用Bootstrap 按钮实例详解
2017/03/29 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
2017/04/25 jQuery
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
2018/09/12 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
python连接MySQL、MongoDB、Redis、memcache等数据库的方法
2013/11/15 Python
Python的爬虫框架scrapy用21行代码写一个爬虫
2017/04/24 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
Python列表倒序输出及其效率详解
2020/03/04 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
基于python实现检索标记敏感词并输出
2020/05/07 Python
scrapy在python爬虫中搭建出错的解决方法
2020/11/22 Python
详解CSS3中的box-sizing(content-box与border-box)
2019/04/19 HTML / CSS
浅谈Html5页面打开app的一些思考
2020/03/30 HTML / CSS
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
Mountain Warehouse波兰官方网站:英国户外品牌
2019/08/29 全球购物
副厂长岗位职责
2014/02/02 职场文书
消防安全宣传标语
2014/06/07 职场文书
学校关爱留守儿童活动方案
2014/08/27 职场文书
MySQL主从切换的超详细步骤
2022/06/28 MySQL