关于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 相关文章推荐
JavaScript 轻松搞定快捷留言功能 只需一行代码
Apr 01 Javascript
jquery根据name属性查找的小例子
Nov 21 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
Apr 02 Javascript
Jquery实现Div上下移动示例
Apr 23 Javascript
jQuery.holdReady()使用方法
May 20 Javascript
jQuery+Ajax实现无刷新分页
Oct 30 Javascript
深入浅析Bootstrap列表组组件
May 03 Javascript
BootStrap Table 获取同行不同列元素的方法
Dec 19 Javascript
AngularJS学习第二篇 AngularJS依赖注入
Feb 13 Javascript
elementUI select组件使用及注意事项详解
May 29 Javascript
浅析Vue下的components模板使用及应用
Nov 27 Javascript
vue瀑布流组件实现上拉加载更多
Mar 10 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
图书管理程序(二)
2006/10/09 PHP
php 仿Comsenz安装效果代码打包提供下载
2010/05/09 PHP
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
php使用curl出现Expect:100-continue解决方法
2015/03/03 PHP
详解PHP对数组的定义以及数组的创建方法
2015/11/27 PHP
php使用str_replace替换多维数组的实现方法分析
2017/06/15 PHP
Laravel中9个不经常用的小技巧汇总
2019/04/16 PHP
仿服务器端脚本方式的JS模板实现方法
2007/04/27 Javascript
动态样式类封装JS代码
2009/09/02 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
2014/10/20 Javascript
JavaScript 事件入门知识
2015/04/13 Javascript
深入浅析JavaScript中的作用域和上下文
2016/03/26 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
es6数组的flat(),flatMap()函数用法实例分析
2020/04/18 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
vscode自定义vue模板的实现
2021/01/27 Vue.js
[05:31]干嘛呢兄弟!DOTA2 TI9语音轮盘部分出处
2019/05/14 DOTA
python判断、获取一张图片主色调的2个实例
2014/04/10 Python
python实现图片变亮或者变暗的方法
2015/06/01 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
纪伊国屋新加坡网上书店:Kinokuniya新加坡
2017/12/29 全球购物
美国知名的隐形眼镜电商:Contacts America
2019/11/19 全球购物
Dr. Martens马汀博士德国官网:马丁靴鼻祖
2019/12/26 全球购物
亚洲领先的设计购物网站:Pinkoi
2020/11/26 全球购物
设计部经理的岗位职责
2013/11/16 职场文书
电大会计学自我鉴定
2014/02/06 职场文书
实习生求职自荐信
2014/02/07 职场文书
飘柔洗发水广告词
2014/03/14 职场文书
群众路线剖析材料怎么写
2014/10/09 职场文书
升职自我推荐信范文
2015/03/25 职场文书
奔腾年代观后感
2015/06/09 职场文书
mysql知识点整理
2021/04/05 MySQL
Html5新增了哪些功能
2021/04/16 HTML / CSS
python实现语音常用度量方法的代码详解
2021/05/25 Python
HTML+JS实现在线朗读器
2022/02/15 Javascript