关于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 post方式传递多个参数值后台以数组的方式进行接收
Jan 11 Javascript
P3P Header解决Cookie跨域的问题
Mar 12 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
Apr 15 Javascript
修改file按钮的默认样式实现代码
Apr 23 Javascript
百度判断手机终端并自动跳转js代码及使用实例
Jun 11 Javascript
jQuery实现的自定义滚动条实例详解
Sep 20 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
在vue2.0中引用element-ui组件库的方法
Jun 21 Javascript
angularJs在多个控制器中共享服务数据的方法
Sep 30 Javascript
angularJs中$scope数据序列化的实例
Sep 30 Javascript
Vue2.0搭建脚手架
Mar 13 Vue.js
关于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
模拟OICQ的实现思路和核心程序(二)
2006/10/09 PHP
PHP生成自定义长度随机字符串的函数分享
2014/05/04 PHP
微信支付开发教程(一)微信支付URL配置
2014/05/28 PHP
PHP获取文件的MD5值并判断是否被修改的例子
2014/06/19 PHP
php多任务程序实例解析
2014/07/19 PHP
PHP连接MSSQL2008/2005数据库(SQLSRV)配置实例
2014/10/22 PHP
修改PHP脚本使WordPress拦截垃圾评论的方法示例
2015/12/10 PHP
php实现图片上传并利用ImageMagick生成缩略图
2016/03/14 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
php简单截取字符串代码示例
2016/10/19 PHP
javascript打开word文档的方法
2014/04/16 Javascript
JS烟花背景效果实现方法
2015/03/03 Javascript
javascript学习笔记之函数定义
2015/06/25 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
vue.js实例对象+组件树的详细介绍
2017/10/20 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
Vue 中使用 CSS Modules优雅方法
2018/04/09 Javascript
node打造微信个人号机器人的方法示例
2018/04/26 Javascript
Node.js API详解之 Error模块用法实例分析
2020/05/14 Javascript
javascript实现简单页面倒计时
2021/03/02 Javascript
Python操作CouchDB数据库简单示例
2015/03/10 Python
Python实现两个list对应元素相减操作示例
2017/06/09 Python
详解Django中间件的5种自定义方法
2018/07/26 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
Python实现将HTML转成PDF的方法分析
2019/05/04 Python
5行Python代码实现图像分割的步骤详解
2020/05/25 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
C#可否对内存进行直接的操作
2015/02/26 面试题
聘任书的写作格式及范文
2014/03/29 职场文书
2014幼儿园卫生保健工作总结
2014/12/05 职场文书
个人年终总结怎么写
2015/03/09 职场文书
材料采购员岗位职责
2015/04/03 职场文书
《女娲补天》读后感5篇
2019/12/31 职场文书
Python按顺序遍历并读取文件夹中文件
2022/04/29 Python