关于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 相关文章推荐
jQuery EasyUI 中文API Button使用实例
Apr 14 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
Jan 23 Javascript
如何在一个页面显示多个百度地图
Apr 07 Javascript
Javascript基础教程之for循环
Jan 18 Javascript
3个可以改善用户体验的AngularJS指令介绍
Jun 18 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
Nov 24 Javascript
JS中frameset框架弹出层实例代码
Apr 01 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
Aug 25 Javascript
Javascript生成带参数的二维码示例
Oct 10 Javascript
layui--select使用以及下拉框实现键盘选择的例子
Sep 24 Javascript
js实现查询商品案例
Jul 22 Javascript
vue中defineProperty和Proxy的区别详解
Nov 30 Vue.js
关于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
php 文件状态缓存带来的问题
2008/12/14 PHP
Thinkphp框架开发移动端接口(2)
2016/08/18 PHP
thinkphp配置文件路径的实现方法
2016/08/30 PHP
laravel-admin select框默认选中的方法
2019/10/03 PHP
QQ登录简单实现代码
2021/03/09 Javascript
TNC vs BOOM BO3 第一场2.13
2021/03/10 DOTA
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
用htc组件制作windows选项卡
2007/01/13 Javascript
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
ExtJs动态生成treepanel的Json格式
2015/07/19 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
JS获取当前脚本文件的绝对路径
2016/03/02 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
2016/05/03 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
2016/06/22 Javascript
终于实现了!精彩的jquery弹幕效果
2016/07/18 Javascript
AngularJS 基础ng-class-even指令用法
2016/08/01 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
2016/08/01 Javascript
Js利用console计算代码运行时间的方法示例
2017/09/24 Javascript
python对字典进行排序实例
2014/09/25 Python
Python中Continue语句的用法的举例详解
2015/05/14 Python
深入源码解析Python中的对象与类型
2015/12/11 Python
python中私有函数调用方法解密
2016/04/29 Python
20个常用Python运维库和模块
2018/02/12 Python
TensorFlow神经网络优化策略学习
2018/03/09 Python
Python推导式简单示例【列表推导式、字典推导式与集合推导式】
2018/12/04 Python
Pycharm连接远程服务器并实现远程调试的实现
2019/08/02 Python
python 变量初始化空列表的例子
2019/11/28 Python
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
好邻里事迹材料
2014/01/16 职场文书
小学生红领巾广播稿
2014/01/21 职场文书
怎么写自荐书范文
2014/02/12 职场文书
国培远程培训感言
2014/03/08 职场文书
管理学院毕业生自荐信范文
2014/03/10 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
2016年教师政治思想表现评语
2015/12/02 职场文书
Windows server 2012 NTP时间同步的实现
2022/06/25 Servers