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 10件让人费解的事情
Feb 15 Javascript
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 Javascript
教你如何使用node.js制作代理服务器
Nov 26 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 Javascript
Bootstrap每天必学之下拉菜单
Nov 25 Javascript
浅析Node.js实现HTTP文件下载
Aug 05 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
Mar 15 Javascript
websocket+node.js实现实时聊天系统问题咨询
May 17 Javascript
JS实现的走迷宫小游戏完整实例
Jul 19 Javascript
Vue的MVVM实现方法
Aug 16 Javascript
从0到1搭建element后台框架优化篇(打包优化)
May 12 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
Feb 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中长文章分页显示实现代码
2012/09/29 PHP
destoon首页调用求购供应信息的地区名称的方法
2014/08/21 PHP
php 5.6版本中编写一个PHP扩展的简单示例
2015/01/20 PHP
PHP开发注意事项总结
2015/02/04 PHP
PHP版QQ互联OAuth示例代码分享
2015/07/05 PHP
PHP中检索字符串的方法分析【strstr与substr_count方法】
2017/02/17 PHP
Laravel推荐使用的十个辅助函数
2019/05/10 PHP
PHP中非常有用却鲜有人知的函数集锦
2019/08/17 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
tp5框架基于Ajax实现列表无刷新排序功能示例
2020/02/10 PHP
js下用层来实现select的title提示属性
2010/02/23 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
2012/01/15 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
2013/01/24 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
2015/04/15 Javascript
Bootstrap基础学习
2015/06/16 Javascript
JavaScript实现url参数转成json形式
2016/09/25 Javascript
微信和qq时间格式模板实例详解
2016/10/21 Javascript
常用jQuery选择器汇总
2017/02/02 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
jsTree事件和交互以及插件plugins详解
2017/08/29 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
2018/11/22 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
2019/02/18 jQuery
JS实现纵向轮播图(初级版)
2020/01/18 Javascript
Node.js API详解之 V8模块用法实例分析
2020/06/05 Javascript
python中遍历文件的3个方法
2014/09/02 Python
跟老齐学Python之Python安装
2014/09/12 Python
Python解析并读取PDF文件内容的方法
2018/05/08 Python
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
Python 通过截图匹配原图中的位置(opencv)实例
2019/08/27 Python
Pandas时间序列重采样(resample)方法中closed、label的作用详解
2019/12/10 Python
《跨越海峡的生命桥》教学反思
2014/02/24 职场文书
入职担保书怎么写
2014/05/12 职场文书
中华魂放飞梦想演讲稿
2014/08/26 职场文书
工作汇报材料难写?方法都在这里了!
2019/07/01 职场文书
使用 JavaScript 制作页面效果
2021/04/21 Javascript
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android