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 树控件 比较好用
Jun 11 Javascript
js 内存释放问题
Apr 25 Javascript
ie下动态加态js文件的方法
Sep 13 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
Nov 30 Javascript
IE中图片的onload事件无效问题和解决方法
Jun 06 Javascript
基于jquery实现的树形菜单效果代码
Sep 06 Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 Javascript
防止重复发送 Ajax 请求
Feb 15 Javascript
angular ng-click防止重复提交实例
Jun 16 Javascript
bootstrap paginator分页前后台用法示例
Jun 17 Javascript
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
如何基于js判断浏览器版本
Feb 20 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
第十一节--重载
2006/11/16 PHP
介绍php设计模式中的工厂模式
2008/06/12 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
PHP实现的mysql操作类【MySQL与MySQLi方式】
2017/10/07 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
jQuery源码分析-01总体架构分析
2011/11/14 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
2014/10/30 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
jquery判断对象是否为空并遍历对象的简单实例
2016/07/26 Javascript
JQuery遍历元素的后代和同胞实现方法
2016/09/18 Javascript
jquery easyui DataGrid简单示例
2017/01/23 Javascript
详细讲解vue2+vuex+axios
2017/05/27 Javascript
Vue.Draggable实现拖拽效果
2020/07/29 Javascript
原生JS实现的轮播图功能详解
2018/08/06 Javascript
详解redux异步操作实践
2018/08/15 Javascript
JS中判断字符串存在和非空的方法
2018/09/12 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
微信小程序如何获取群聊的openGid以及名称详解
2019/07/17 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
2019/12/09 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
2020/04/01 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
深入分析python中整型不会溢出问题
2018/06/18 Python
使用Python横向合并excel文件的实例
2018/12/11 Python
通过cmd进入python的实例操作
2019/06/26 Python
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
Pytorch反向求导更新网络参数的方法
2019/08/17 Python
Python3.6+selenium2.53.6自动化测试_读取excel文件的方法
2019/09/06 Python
学习Django知识点分享
2019/09/11 Python
应聘收银员个人的求职信
2013/11/30 职场文书
会计演讲稿范文
2014/05/23 职场文书
新农村建设典型材料
2014/05/31 职场文书
驻村工作先进事迹
2014/08/14 职场文书
一百条裙子读书笔记
2015/07/01 职场文书
2019大学生实习报告
2019/06/21 职场文书
四十九个javascript小知识实用技巧
2021/11/20 Javascript