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让setInteval里的函数参数中的this指向特定的对象
Jan 31 Javascript
基于jQuery制作迷你背词汇工具
Jul 27 Javascript
Javascript事件热键兼容ie|firefox
Dec 30 Javascript
JavaScript操纵窗口的方法小结
Jun 28 Javascript
一个判断抢购时间是否到达的简单的js函数
Jun 23 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
Sep 23 Javascript
实用又漂亮的BootstrapValidator表单验证插件
May 30 Javascript
如何在Angular.JS中接收并下载PDF
Nov 26 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
Bootstrap modal只加载一次数据的解决办法(推荐)
Nov 24 Javascript
JS实现调用本地摄像头功能示例
May 18 Javascript
vue3.0自定义指令(drectives)知识点总结
Dec 27 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
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
PHP中使用hidef扩展代替define提高性能
2015/04/09 PHP
php恢复数组的key为数字序列的方法
2015/04/28 PHP
PHP通过反射动态加载第三方类和获得类源码的实例
2015/11/27 PHP
Laravel搭建后台登录系统步骤详解
2016/07/26 PHP
总结一些js自定义的函数
2006/08/05 Javascript
Node.js开发之访问Redis数据库教程
2015/01/14 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
js获取及判断键盘按键的方法
2015/12/01 Javascript
window.onload绑定多个事件的两种解决方案
2016/05/15 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
2016/12/14 Javascript
Angular.js指令学习中一些重要属性的用法教程
2017/05/24 Javascript
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
微信小程序radio组件使用详解
2018/01/31 Javascript
angularjs http与后台交互的实现示例
2018/12/21 Javascript
解决vue跨域axios异步通信问题
2019/04/17 Javascript
详解JavaScript 事件流
2020/09/02 Javascript
vue实现按钮切换图片
2021/01/20 Vue.js
[02:10]三分钟回顾完美世界城市挑战赛
2019/01/24 DOTA
用Python编写一个国际象棋AI程序
2014/11/28 Python
Pandas 合并多个Dataframe(merge,concat)的方法
2018/06/08 Python
Python设置在shell脚本中自动补全功能的方法
2018/06/25 Python
详解Python 正则表达式模块
2018/11/05 Python
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
数控专业毕业生求职信范文
2013/09/21 职场文书
重阳节登山活动方案
2014/02/03 职场文书
2014乡镇“三八”国际劳动妇女节活动总结
2014/03/01 职场文书
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
反四风对照检查材料思想汇报
2014/09/16 职场文书
森马旗舰店双十一营销方案
2014/09/29 职场文书
2014年档案室工作总结
2014/12/01 职场文书
2015年乡镇党务公开工作总结
2015/05/19 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
关于保护环境的建议书
2019/06/24 职场文书
2019生态环境保护倡议书!
2019/07/03 职场文书