关于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 相关文章推荐
JavaScript setTimeout和setInterval的使用方法 说明
Mar 25 Javascript
Tips 带三角可关闭的文字提示
Oct 06 Javascript
JavaScript格式化数字的函数代码
Nov 30 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
Sep 13 Javascript
jQuery实现的漂亮表单效果代码
Aug 18 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
AngularJS基础 ng-keydown 指令简单示例
Aug 02 Javascript
浅谈jQuery中的checkbox问题
Aug 10 Javascript
Angularjs上传文件组件flowjs功能
Aug 07 Javascript
bootstrap table合并行数据并居中对齐效果
Oct 17 Javascript
微信小程序实现下拉菜单切换效果
Mar 30 Javascript
微信小程序中网络请求缓存的解决方法
Dec 29 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
Search File Contents PHP 搜索目录文本内容的代码
2010/02/21 PHP
PHP+javascript制作带提示的验证码源码分享
2014/05/28 PHP
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
php简单实现查询数据库返回json数据
2015/04/16 PHP
php自定义分页类完整实例
2015/12/25 PHP
Yii2 assets清除缓存的方法
2016/05/16 PHP
学习YUI.Ext 第三天
2007/03/10 Javascript
js用图作提交按钮或超连接
2008/03/26 Javascript
javascript window对象属性整理
2009/10/24 Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
2011/04/07 Javascript
基于JQUERY的多级联动代码
2012/01/24 Javascript
Javascript基础知识(三)BOM,DOM总结
2014/09/29 Javascript
angular.bind使用心得
2015/10/26 Javascript
微信小程序动态的加载数据实例代码
2017/04/14 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
JS将网址url转化为JSON格式的方法
2018/07/02 Javascript
详解Vue依赖收集引发的问题
2019/04/22 Javascript
详解uniapp的全局变量实现方式
2021/01/11 Javascript
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
Python下使用Scrapy爬取网页内容的实例
2018/05/21 Python
python定时关机小脚本
2018/06/20 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
Python3 导入上级目录中的模块实例
2019/02/16 Python
详解一种用django_cache实现分布式锁的方式
2019/09/01 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
亚瑟士美国官网:ASICS美国
2017/02/01 全球购物
办公室领导干部作风整顿个人整改措施
2014/09/17 职场文书
中学生清明节演讲稿
2015/03/18 职场文书
2016教师节感恩话语
2015/12/09 职场文书
二年级作文之动物作文
2019/11/13 职场文书
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python
javascript canvas实现雨滴效果
2021/06/09 Javascript
详解Java实践之建造者模式
2021/06/18 Java/Android
Apache POI操作批量导入MySQL数据库
2022/06/21 Servers