关于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中的.bind()、.live()和.delegate()之间区别分析
Jun 08 Javascript
JQuery之focus函数使用介绍
Aug 20 Javascript
利用JS来控制键盘的上下左右键(示例代码)
Dec 14 Javascript
类似天猫商品详情随浏览器移动的示例代码
Feb 27 Javascript
jquery实现点击页面计算点击次数
Jan 23 Javascript
快速掌握jQuery插件WebUploader文件上传
Nov 07 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
Mar 30 Javascript
JS计算距当前时间的时间差实例
Dec 29 Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 Javascript
react 实现页面代码分割、按需加载的方法
Apr 03 Javascript
在vue项目中引用Iview的方法
Sep 14 Javascript
vue改变循环遍历后的数据实例
Nov 07 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
php5 图片验证码实现代码
2009/12/11 PHP
PHP 面向对象 final类与final方法
2010/05/05 PHP
ThinkPHP表单自动提交验证实例教程
2014/07/18 PHP
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
PHP的PDO常用类库实例分析
2016/04/07 PHP
PHP实现创建微信自定义菜单的方法示例
2017/07/14 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
jQuery大于号(&gt;)选择器的作用解释
2015/01/13 Javascript
JavaScript Array对象详解
2016/03/01 Javascript
JavaScript驾驭网页-CSS与DOM
2016/03/24 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
2016/07/25 Javascript
AngularJS实现表单验证功能
2017/01/09 Javascript
简单实现js轮播图效果
2017/07/14 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
jQuery实现页码跳转式动态数据分页
2017/12/31 jQuery
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
vue.js删除列表中的一行
2018/06/30 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
Vue ​v-model相关知识总结
2021/01/28 Vue.js
[02:41]辉夜杯现场一家三口 “我爸玩风行 我玩血魔”
2015/12/27 DOTA
python魔法方法-属性转换和类的表示详解
2016/07/22 Python
Python实现的简单模板引擎功能示例
2017/09/02 Python
使用 Python 实现微信公众号粉丝迁移流程
2018/01/03 Python
ubuntu环境下python虚拟环境的安装过程
2018/01/07 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
使用Python调取任意数字资产钱包余额功能
2019/08/15 Python
python multiprocessing模块用法及原理介绍
2019/08/20 Python
Pytorch .pth权重文件的使用解析
2020/02/14 Python
pandas读取csv文件提示不存在的解决方法及原因分析
2020/04/21 Python
5款实用的python 工具推荐
2020/10/13 Python
活动策划邀请函
2014/02/06 职场文书
社区活动总结
2015/02/04 职场文书
导游词之上海东方明珠塔
2019/09/25 职场文书