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实现锚点(Anchor)间平滑跳转
Sep 08 Javascript
jquery获得下拉框值的代码
Aug 13 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
Sep 23 Javascript
js+csss实现的一个带复选框的下拉框
Sep 29 Javascript
Javascript中document.referrer隐藏来源的方法
Jan 16 Javascript
JS变量及其作用域
Mar 29 Javascript
react native仿微信PopupWindow效果的实例代码
Aug 07 Javascript
vue init失败简单解决方法(终极版)
Dec 22 Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 Javascript
angularjs通过过滤器返回超链接的方法
Oct 26 Javascript
使用post方法实现json往返传输数据的方法
Mar 30 Javascript
vue基于better-scroll实现左右联动滑动页面
Jun 30 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来自动调用不同服务器上的flash
2006/10/09 PHP
火车头采集器3.0采集图文教程
2007/03/17 PHP
PHP判断搜索引擎蜘蛛并自动记忆到文件的代码
2012/02/04 PHP
PHP实现基于PDO扩展连接PostgreSQL对象关系数据库示例
2018/03/31 PHP
PHP ADODB实现分页功能简单示例
2018/05/25 PHP
基于Laravel(5.4版本)的基本增删改查操作方法
2019/10/11 PHP
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
点图片上一页下一页翻页效果
2008/07/09 Javascript
Javascript 错误处理的几种方法
2009/06/13 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
详谈javascript中DOM的基本属性
2015/02/26 Javascript
javascript制作sql转换为stringBuffer的小工具
2015/04/03 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
jQuery简易时光轴实现方法示例
2017/03/13 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
2017/05/08 jQuery
一步步教你利用Canvas对图片进行处理
2017/09/19 Javascript
深入理解Vue2.x的虚拟DOM diff原理
2017/09/27 Javascript
深入解析ES6中的promise
2018/11/08 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
js表达式与运算符简单操作示例
2020/02/15 Javascript
[02:44]2014DOTA2 国际邀请赛中国区预选赛 大神红毯秀
2014/05/25 DOTA
对python的文件内注释 help注释方法
2018/05/23 Python
Django框架实现分页显示内容的方法详解
2019/05/10 Python
DataFrame.to_excel多次写入不同Sheet的实例
2019/12/02 Python
Django数据结果集序列化并展示实现过程
2020/04/22 Python
Pycharm激活方法及详细教程(详细且实用)
2020/05/12 Python
python利用paramiko实现交换机巡检的示例
2020/09/22 Python
Django通过设置CORS解决跨域问题
2020/11/26 Python
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
HTML5图片层叠的实现示例
2020/07/07 HTML / CSS
英国综合网上购物商城:The Hut
2018/07/03 全球购物
文职个人求职信范文
2013/09/23 职场文书
环境科学专业个人求职信
2013/12/15 职场文书
2014年班务工作总结
2014/12/02 职场文书
师德师风主题教育活动总结
2015/05/07 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书