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 相关文章推荐
Javascript里使用Dom操作Xml
Sep 20 Javascript
JavaScript中的Window窗口对象
Jan 16 Javascript
jquery ajax 登录验证实现代码
Sep 23 Javascript
js实现杯子倒水问题自动求解程序
Mar 25 Javascript
JavaScript实现页面定时刷新(定时器,meta)
Oct 12 Javascript
Vue兼容ie9的问题全面解决方案
Jun 19 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
Sep 29 Javascript
jquery分页插件pagination使用教程
Oct 23 jQuery
关于vue的npm run dev和npm run build的区别介绍
Jan 14 Javascript
微信小程序8种数据通信的方式小结
Feb 03 Javascript
解决vue中provide inject的响应式监听
Apr 19 Vue.js
vue特效之翻牌动画
Apr 20 Vue.js
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中利用XML技术构造远程服务(上)
2006/10/09 PHP
使PHP自定义函数返回多个值
2006/11/26 PHP
PHPMailer邮件发送的实现代码
2013/05/04 PHP
PHP基于Redis消息队列实现发布微博的方法
2017/05/03 PHP
Js组件的一些写法
2010/09/10 Javascript
19个很有用的 JavaScript库推荐
2011/06/27 Javascript
js获取当前地址 JS获取当前URL的示例代码
2014/02/26 Javascript
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
JavaSacript中charCodeAt()方法的使用详解
2015/06/05 Javascript
基于JavaScript FileReader上传图片显示本地链接
2016/05/27 Javascript
Bootstrap标签页(Tab)插件使用方法
2017/03/21 Javascript
详解ES6通过WeakMap解决内存泄漏问题
2018/03/09 Javascript
angular2实现统一的http请求头方法
2018/08/13 Javascript
微信小程序实现选择地址省市区三级联动
2020/06/21 Javascript
JavaScript中的函数式编程详解
2020/08/22 Javascript
vue3+typescript实现图片懒加载插件
2020/10/26 Javascript
JavaScript实现京东快递单号查询
2020/11/30 Javascript
[02:43]DOTA2英雄基础教程 德鲁伊
2014/01/13 DOTA
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
一个简单的python程序实例(通讯录)
2013/11/29 Python
Python pickle模块用法实例分析
2015/05/27 Python
Python运算符重载用法实例
2015/05/28 Python
python实现list元素按关键字相加减的方法示例
2017/06/09 Python
详谈Python基础之内置函数和递归
2017/06/21 Python
python使用SMTP发送qq或sina邮件
2017/10/21 Python
python+numpy按行求一个二维数组的最大值方法
2019/07/09 Python
Django model重写save方法及update踩坑详解
2020/07/27 Python
pycharm2020.1.2永久破解激活教程,实测有效
2020/10/29 Python
CSS3制作日历实现代码
2012/01/21 HTML / CSS
Tory Burch英国官方网站:美国时尚生活品牌
2017/12/06 全球购物
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
运输企业安全生产责任书
2014/07/28 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
学习保证书100字
2015/02/26 职场文书
2015年销售部工作总结范文
2015/04/27 职场文书
六一活动主持词
2015/06/30 职场文书