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 相关文章推荐
JXTree对象,读取外部xml文件数据,生成树的函数
Apr 02 Javascript
JavaScript中的细节分析
Jun 30 Javascript
onclick与listeners的执行先后问题详细解剖
Jan 07 Javascript
用jquery实现输入框获取焦点消失文字
Apr 27 Javascript
使用jQuery将多条数据插入模态框的实现代码
Oct 08 Javascript
jquery滚动加载数据的方法
Mar 09 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 Javascript
浅谈js常用内置方法和对象
Sep 24 Javascript
基于pako.js实现gzip的压缩和解压功能示例
Jun 13 Javascript
React入门教程之Hello World以及环境搭建详解
Jul 11 Javascript
js原生日历的实例(推荐)
Oct 31 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
Jul 05 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结合js实现点击超链接执行删除确认操作
2014/10/31 PHP
asp.net和php的区别点总结
2019/10/10 PHP
Mootools 1.2 手风琴(Accordion)教程
2009/09/15 Javascript
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
JavaScript中常见的字符串操作函数及用法汇总
2015/05/04 Javascript
Bootstrap每天必学之表格
2015/11/23 Javascript
javascript实现C语言经典程序题
2015/11/29 Javascript
开启BootStrap学习之旅
2016/05/04 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
Bootstrap如何创建表单
2016/10/21 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
判断滚动条滑到底部触发事件(实例讲解)
2017/11/15 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
2020/02/15 Javascript
vue配置多代理服务接口地址操作
2020/09/08 Javascript
在Python中使用CasperJS获取JS渲染生成的HTML内容的教程
2015/04/09 Python
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
Python与R语言的简要对比
2017/11/14 Python
python使用rpc框架gRPC的方法
2018/08/24 Python
用Pycharm实现鼠标滚轮控制字体大小的方法
2019/01/15 Python
浅谈python的输入输出,注释,基本数据类型
2019/04/02 Python
python实现飞机大战游戏
2020/10/26 Python
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
2009/07/16 HTML / CSS
布里斯班女装时尚品牌:Adrift
2017/12/28 全球购物
吉列剃须刀英国官网:Gillette英国
2019/03/28 全球购物
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
构造方法和其他方法的区别
2016/04/26 面试题
秋天的怀念教学反思
2014/04/28 职场文书
企业承诺书怎么写
2014/05/24 职场文书
幼儿园迎国庆65周年活动策划方案
2014/09/16 职场文书
党委书记群众路线对照检查材料思想汇报
2014/10/04 职场文书
军事博物馆观后感
2015/06/05 职场文书
讲座新闻稿
2015/07/18 职场文书
五年级作文之想象作文
2019/10/30 职场文书