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 相关文章推荐
js中判断数字\字母\中文的正则表达式 (实例)
Jun 29 Javascript
jQuery在iframe中无法弹出对话框的解决方法
Jan 12 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 Javascript
jQuery构造函数init参数分析
May 13 Javascript
Javascript页面跳转常见实现方式汇总
Nov 28 Javascript
JavaScript 是什么意思
Sep 22 Javascript
AngularJS+Bootstrap实现多文件上传与管理
Nov 08 Javascript
bootstrapValidator表单验证插件学习
Dec 30 Javascript
js CSS3实现卡牌旋转切换效果
Jul 04 Javascript
小程序云开发实战小结
Oct 25 Javascript
JS实现字体背景跑马灯
Jan 06 Javascript
js 实现Material UI点击涟漪效果示例
Sep 23 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
老照片 - 几十年前的收音机与人
2021/03/02 无线电
PHP5 字符串处理函数大全
2010/03/23 PHP
php与paypal整合方法
2010/11/28 PHP
PHP基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
Codeigniter中集成smarty和adodb的方法
2016/03/04 PHP
JS文本框默认值处理详解
2013/07/10 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
了不起的node.js读书笔记之node的学习总结
2014/12/22 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
jQuery实现图片局部放大镜效果
2016/03/17 Javascript
Ajax 加载数据 练习代码
2017/01/05 Javascript
js实现下一页页码效果
2017/03/07 Javascript
Vue2路由动画效果的实现代码
2017/07/10 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
基于three.js编写的一个项目类示例代码
2018/01/05 Javascript
JavaScript中变量提升和函数提升的详解
2020/08/07 Javascript
详解Vue中的watch和computed
2020/11/09 Javascript
[01:28:43]2014 DOTA2华西杯精英邀请赛5 24 DK VS CIS
2014/05/25 DOTA
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
python Django连接MySQL数据库做增删改查
2013/11/07 Python
urllib2自定义opener详解
2014/02/07 Python
Python统计文件中去重后uuid个数的方法
2015/07/30 Python
python实现扫描局域网指定网段ip的方法
2019/04/16 Python
超全Python图像处理讲解(多模块实现)
2020/04/13 Python
Python实现验证码识别
2020/06/15 Python
CSS3实战第一波 让我们尽情的圆角吧
2010/08/27 HTML / CSS
美国最便宜的旅游网站:CheapTickets
2017/07/09 全球购物
C语言笔试题回忆
2015/04/02 面试题
酒店前台接待岗位职责
2013/12/03 职场文书
幼儿园家长评语大全
2014/04/16 职场文书
个人收入证明范本
2014/09/18 职场文书
2014领导干部学习焦裕禄同志先进事迹思想汇报
2014/09/19 职场文书
2014年节能降耗工作总结
2014/12/11 职场文书
委托书格式范文
2015/01/28 职场文书
北京爱情故事观后感
2015/06/12 职场文书
2015初一年级组工作总结
2015/07/24 职场文书