关于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 相关文章推荐
火狐浏览器(firefox)下获得Event对象以及keyCode
Nov 13 Javascript
javascript 数组排序函数
Aug 20 Javascript
10分钟学会写Jquery插件实例教程
Sep 06 Javascript
跟我学习javascript解决异步编程异常方案
Nov 23 Javascript
JS获取html元素的标记名实现方法
Oct 08 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
Nov 01 Javascript
微信小程序 判断手机号的实现代码
Apr 19 Javascript
微信小程序删除处理详解
Aug 16 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
Apr 11 Javascript
JQuery的加载和选择器用法简单示例
May 13 jQuery
Vue自定义组件双向绑定实现原理及方法详解
Sep 03 Javascript
JavaScript中的宏任务和微任务详情
Nov 27 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
点评山进PR-D3L三波段收音机
2021/03/02 无线电
PHPShop存在多个安全漏洞
2006/10/09 PHP
搜索引擎技术核心揭密
2006/10/09 PHP
Codeigniter注册登录代码示例
2014/06/12 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
PHP观察者模式实例分析【对比JS观察者模式】
2019/05/22 PHP
javascript的内存管理详解
2013/08/07 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
2014/12/15 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
2014/12/18 Javascript
js计算任意值之间随机数的方法
2015/01/16 Javascript
Bootstrap每天必学之缩略图与警示窗
2015/11/29 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
2016/10/21 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
使用vue实现点击按钮滑出面板的实现代码
2017/01/10 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
JS实现换肤功能的方法实例详解
2019/01/30 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
2019/07/24 Javascript
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
2019/12/06 Javascript
用webAPI实现图片放大镜效果
2020/11/23 Javascript
[04:03]2014DOTA2西雅图国际邀请赛 LGD战队巡礼
2014/07/07 DOTA
python中requests小技巧
2017/05/10 Python
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
Python流程控制常用工具详解
2020/02/24 Python
彪马英国官网:PUMA英国
2019/02/11 全球购物
收银员的岗位职责范本
2014/02/04 职场文书
《风娃娃》教学反思
2014/04/19 职场文书
中国在我心中演讲稿
2014/09/13 职场文书
预备党员转正思想汇报
2014/09/26 职场文书
给男朋友的道歉短信
2015/05/12 职场文书
交通安全宣传标语(100条)
2019/08/22 职场文书
导游词之麻姑仙境
2019/11/18 职场文书
详细分析PHP7与PHP5区别
2021/06/26 PHP
Mybatis-plus在项目中的简单应用
2021/07/01 Java/Android