关于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 相关文章推荐
将CKfinder整合进CKEditor3.0的新方法
Jan 10 Javascript
该如何加载google-analytics(或其他第三方)的JS
May 13 Javascript
jQuery Jcrop插件实现图片选取功能
Nov 23 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
Apr 19 Javascript
js判断是否为ie的方法小结
Jan 13 Javascript
基于Jquery实现键盘按键监听
May 11 Javascript
js仿黑客帝国字母掉落效果代码分享
Nov 08 Javascript
jquery实现多条件筛选特效代码分享
Aug 28 Javascript
基于jQuery实现表格的排序
Dec 02 Javascript
基于BootStrap的前端分页带省略号和上下页效果
May 18 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
Nov 28 Javascript
js正则匹配markdown里的图片标签的实现
Mar 24 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
PHP的拦截器实例分析
2014/11/03 PHP
两种php给图片加水印的实现代码
2020/04/18 PHP
Yii统计不同类型邮箱数量的方法
2016/10/18 PHP
简单实用的PHP文本缓存类实例
2019/03/22 PHP
JavaScript 大数据相加的问题
2011/08/03 Javascript
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
浏览器缩放检测的js代码
2014/09/28 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
2015/03/25 Javascript
JavaScript实现点击自动选择TextArea文本的方法
2015/07/02 Javascript
JavaScript函数中关于valueOf和toString的理解
2016/06/14 Javascript
node.js缺少mysql模块运行报错的解决方法
2016/11/13 Javascript
详解js中call与apply关键字的作用
2016/11/21 Javascript
Vue数据驱动模拟实现4
2017/01/12 Javascript
jQuery实现简单日期格式化功能示例
2017/09/19 jQuery
原生JS实现轮播图效果
2018/10/12 Javascript
微信小程序实现登录遮罩效果
2018/11/01 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
2018/12/09 Javascript
vue-property-decorator用法详解
2019/12/12 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
python抓取网页时字符集转换问题处理方案分享
2014/06/19 Python
python中lambda函数 list comprehension 和 zip函数使用指南
2014/09/28 Python
解决Tensorflow占用GPU显存问题
2020/02/03 Python
浅谈python的elementtree模块处理中文注意事项
2020/03/06 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
python 写一个文件分发小程序
2020/12/05 Python
python中操作文件的模块的方法总结
2021/02/04 Python
Python实现粒子群算法的示例
2021/02/14 Python
KIKO美国官网:意大利的平价彩妆品牌
2017/05/16 全球购物
英国家庭珠宝商:T. H. Baker
2018/02/08 全球购物
网络体系结构及协议的定义
2014/03/13 面试题
2014村务公开实施方案
2014/02/25 职场文书
小学生学习感言
2014/03/10 职场文书
教师作风整顿个人剖析材料
2014/10/10 职场文书
交通事故和解协议书
2015/01/27 职场文书
公文写作:教你写“建议书”
2019/05/07 职场文书
修改MySQL的数据库引擎为INNODB的方法
2021/05/26 MySQL