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 相关文章推荐
jQuery $.each的用法说明
Mar 22 Javascript
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
Jun 27 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
Aug 22 Javascript
移动端 一个简单易懂的弹出框
Jul 06 Javascript
JavaScript 冒泡排序和选择排序的实现代码
Sep 03 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
Dec 28 Javascript
详解Node.js中exports和module.exports的区别
Apr 19 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
Mar 01 Javascript
Vue中的混入的使用(vue mixins)
Jun 01 Javascript
js实现移动端tab切换时下划线滑动效果
Sep 08 Javascript
原生js实现无缝轮播图
Jan 11 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中将地址生成迅雷快车旋风链接的代码[测试通过]
2011/04/20 PHP
php下获取http状态的实现代码
2014/05/09 PHP
详谈PHP编码转换问题
2015/07/28 PHP
ExtJS 2.0 GridPanel基本表格简明教程
2010/05/25 Javascript
菜鸟javascript基础资料整理3 正则
2010/12/06 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
2013/08/26 Javascript
Bootstrap实现下拉菜单效果
2016/04/29 Javascript
Javascript实现代码折叠功能
2016/08/25 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
浅谈javascript中的 “ &amp;&amp; ” 和 “ || ”
2017/02/02 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
2017/07/07 Javascript
Vue Socket.io源码解读
2018/02/07 Javascript
js中数组对象去重的两种方法
2019/01/18 Javascript
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
使用webpack编译es6代码的方法步骤
2019/04/28 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
详解uniapp的全局变量实现方式
2021/01/11 Javascript
利用Python中的mock库对Python代码进行模拟测试
2015/04/16 Python
python下os模块强大的重命名方法renames详解
2017/03/07 Python
python Event事件、进程池与线程池、协程解析
2019/10/25 Python
Django中Aggregation聚合的基本使用方法
2020/07/09 Python
Django创建一个后台的基本步骤记录
2020/10/02 Python
Swanson中国官网:美国斯旺森健康产品公司
2021/03/01 全球购物
腾讯公司的一个sql题
2013/01/22 面试题
化学相关工作求职信
2013/10/02 职场文书
商场主管竞聘书
2014/03/31 职场文书
护士演讲稿优秀范文
2014/04/30 职场文书
小学生运动会报道稿
2014/09/12 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
电影红河谷观后感
2015/06/11 职场文书
年终工作总结范文
2019/06/20 职场文书
Python借助with语句实现代码段只执行有限次
2022/03/23 Python