关于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 tools 系列 scrollable学习
Sep 06 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
Aug 02 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
May 05 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
Sep 25 Javascript
基于javascript实现tab切换特效
Mar 29 Javascript
轻松5句话解决JavaScript的作用域
Jul 15 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
Oct 15 Javascript
VUE前端cookie简单操作
Oct 17 Javascript
js 显示日期时间的实例(时间过一秒加1)
Oct 25 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
Dec 23 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
Nov 04 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
May 14 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的curl实现get和post的代码
2008/08/23 PHP
PHP的加密方式及原理
2012/06/14 PHP
那些年我们错过的魔术方法(Magic Methods)
2014/01/14 PHP
PHP 数组基本操作方法详解
2016/06/17 PHP
PHP微信支付实例解析
2016/07/22 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
php微信公众号开发之快递查询
2018/10/20 PHP
解决Laravel 使用insert插入数据,字段created_at为0000的问题
2019/10/11 PHP
PHP http请求超时问题解决方案
2020/11/13 PHP
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
js中哈希表的几种用法总结
2014/01/28 Javascript
json属性名为什么要双引号(个人猜测)
2014/07/31 Javascript
jQuery实现统计复选框选中数量
2014/11/24 Javascript
JS根据生日算年龄的方法
2015/05/05 Javascript
使用Angular.js实现简单的购物车功能
2016/11/21 Javascript
浅谈jQuery before和insertBefore的区别
2016/12/04 Javascript
Bootstrap导航条鼠标悬停下拉菜单
2017/01/04 Javascript
javascript 开发之百度地图使用到的js函数整理
2017/05/19 Javascript
Angularjs上传文件组件flowjs功能
2017/08/07 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
微信小程序适配iphoneX的实现方法
2018/09/18 Javascript
详解Python做一个名片管理系统
2019/03/14 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
html5定制表单_动力节点Java学院整理
2017/07/11 HTML / CSS
美国正宗奢华复古手袋、珠宝及配饰网站:What Goes Around Comes Around
2018/07/21 全球购物
Footshop罗马尼亚:最好的运动鞋选择
2019/09/10 全球购物
美国眼镜网站:LensCrafters
2020/01/19 全球购物
教师自我评价范例
2013/09/24 职场文书
大学生个人简历自我评价
2013/11/16 职场文书
高一新生军训方案
2014/05/12 职场文书
党员教师四风问题对照检查材料
2014/09/26 职场文书
离婚协议书范文2014
2014/10/16 职场文书
个人创业事迹材料
2014/12/30 职场文书
2015年销售工作总结范文
2015/03/30 职场文书