IE不支持getElementsByClassName最终完美解决方案


Posted in Javascript onDecember 17, 2012

目前可以这么解决,判断浏览器支不支持这个方法,如果支持就不管;如果不支持,就在document对象里加入getElementsByClassName这个方法,这样的写法有一个好处,即不管有没有原生函数你都不用去修改代码。

通常先使用getElementsByTagName("*")取出文档中所有元素,然后进行遍历,使用正则表达式找出匹配的元素放入一个数组返回。由于IE5不支持document.getElementsByTagName("*"),要使用分支document.all以防错误

下面的方法完美支持了document写法

if(!document.getElementsByClassName){ 
document.getElementsByClassName = function(className, element){ 
var children = (element || document).getElementsByTagName('*'); 
var elements = new Array(); 
for (var i=0; i<children.length; i++){ 
var child = children[i]; 
var classNames = child.className.split(' '); 
for (var j=0; j<classNames.length; j++){ 
if (classNames[j] == className){ 
elements.push(child); 
break; 
} 
} 
} 
return elements; 
}; 
}

最终的方案为: 
var getElementsByClassName = function (searchClass, node,tag) { 
if(document.getElementsByClassName){ 
var nodes = (node || document).getElementsByClassName(searchClass),result = []; 
for(var i=0 ;node = nodes[i++];){ 
if(tag !== "*" && node.tagName === tag.toUpperCase()){ 
result.push(node) 
}else{ 
result.push(node) 
} 
} 
return result 
}else{ 
node = node || document; 
tag = tag || "*"; 
var classes = searchClass.split(" "), 
elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag), 
patterns = [], 
current, 
match; 
var i = classes.length; 
while(--i >= 0){ 
patterns.push(new RegExp("(^|\s)" + classes[i] + "(\s|$)")); 
} 
var j = elements.length; 
while(--j >= 0){ 
current = elements[j]; 
match = false; 
for(var k=0, kl=patterns.length; k<kl; k++){ 
match = patterns[k].test(current.className); 
if (!match) break; 
} 
if (match) result.push(current); 
} 
return result; 
} 
}
Javascript 相关文章推荐
用 JSON 处理缓存
Apr 27 Javascript
JavaScript定时器详解及实例
Aug 01 Javascript
限制textbox或textarea输入字符长度的JS代码
Oct 16 Javascript
JavaScript中instanceof运算符的用法总结
Nov 19 Javascript
学习使用bootstrap3栅格系统
Apr 12 Javascript
限制复选框最多选择项的实现代码
May 30 Javascript
javascript与jquery动态创建html元素示例
Jul 25 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
Sep 20 Javascript
AngularJS表单验证中级篇(3)
Sep 28 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
Mar 21 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
Oct 18 Javascript
详解React之父子组件传递和其它一些要点
Jun 25 Javascript
jQuery移动和复制dom节点实用DOM操作案例
Dec 17 #Javascript
javascript中判断一个值是否在数组中并没有直接使用
Dec 17 #Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
Dec 17 #Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
Dec 17 #Javascript
如何让页面在打开时自动刷新一次让图片全部显示
Dec 17 #Javascript
js中escape对应的C#解码函数 UrlDecode
Dec 16 #Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
Dec 16 #Javascript
You might like
php更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
PHP基础学习之流程控制的实现分析
2013/04/28 PHP
使用PHPCMS搭建wap手机网站
2015/09/20 PHP
php通过淘宝API查询IP地址归属等信息
2015/12/25 PHP
Apache无法自动跳转却显示目录的解决方法
2020/11/30 PHP
详解php用curl调用接口方法,get和post两种方式
2017/01/13 PHP
PHP的重载使用魔术方法代码实例详解
2021/02/26 PHP
JavaScript获取GridView中用户点击控件的行号,列号
2009/04/14 Javascript
javascript 面向对象思想 附源码
2009/07/07 Javascript
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
jQuery setTimeout()函数使用方法
2013/04/07 Javascript
javascript简单实现类似QQ头像弹出效果的方法
2015/08/03 Javascript
javascript实现数组中的内容随机输出
2015/08/11 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
2016/11/11 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
详解vue.js全局组件和局部组件
2017/04/10 Javascript
vue组件与复用详解
2018/04/08 Javascript
JS 实现微信扫一扫功能
2018/09/14 Javascript
详解javascript replace高级用法
2019/02/17 Javascript
JavaScript静态作用域和动态作用域实例详解
2019/06/17 Javascript
[03:01]完美世界DOTA2联赛PWL S2 集锦第二期
2020/12/03 DOTA
Python中unittest用法实例
2014/09/25 Python
Python中的连接符(+、+=)示例详解
2017/01/13 Python
详解TensorFlow在windows上安装与简单示例
2018/03/05 Python
python单例设计模式实现解析
2020/01/07 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
Python如何实现线程间通信
2020/07/30 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
英国第一摩托车和摩托车越野配件商店:GhostBikes
2019/03/10 全球购物
开放系统互连参考模型
2016/06/29 面试题
一名毕业生的自我鉴定
2013/12/04 职场文书
银行服务感言
2014/03/01 职场文书
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
出国留学经济担保书
2014/04/01 职场文书
2014年项目工作总结
2014/11/24 职场文书
2014年医院科室工作总结
2014/12/20 职场文书