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解决数字不能换行问题
Aug 10 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
Jan 03 Javascript
jQuery的each终止或跳过示例代码
Dec 12 Javascript
jquery 获取dom固定元素 添加样式的简单实例
Feb 04 Javascript
jQuery trigger()方法用法介绍
Jan 13 Javascript
Jquery中CSS选择器用法分析
Feb 10 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
Sep 13 Javascript
jQuery实现列表的增加和删除功能
Jun 14 jQuery
js代码规范之Eslint安装与配置详解
Sep 08 Javascript
vue如何进行动画的封装
Sep 26 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
Aug 12 Javascript
详解JS函数防抖
Jun 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
第三节--定义一个类
2006/11/16 PHP
PHP不用递归遍历目录下所有文件的代码
2014/07/04 PHP
php使用fsockopen函数发送post,get请求获取网页内容的方法
2014/11/15 PHP
php判断两个日期之间相差多少个月份的方法
2015/06/18 PHP
PHP中子类重载父类的方法【parent::方法名】
2016/05/06 PHP
PHP快速排序quicksort实例详解
2016/09/28 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
jQuery的end()方法使用详解
2015/07/15 Javascript
jquery马赛克拼接翻转效果代码分享
2015/08/24 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
2017/11/02 Javascript
Node.js 中使用 async 函数的方法
2017/11/20 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
浅谈Angular单元测试总结
2019/03/22 Javascript
微信小程序文字显示换行问题
2019/07/28 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
2020/01/03 Javascript
JavaScript中this的学习笔记及用法整理
2020/02/17 Javascript
[05:20]卡尔工作室_DOTA2新手教学_DOTA2超强新手功能
2013/04/22 DOTA
详解python中的线程
2018/02/10 Python
python实现简单登陆系统
2018/10/18 Python
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
python shapely.geometry.polygon任意两个四边形的IOU计算实例
2020/04/12 Python
keras 实现轻量级网络ShuffleNet教程
2020/06/19 Python
在pycharm中文件取消用 pytest模式打开的操作
2020/09/01 Python
接口自动化多层嵌套json数据处理代码实例
2020/11/20 Python
联想德国官网:Lenovo Germany
2018/07/04 全球购物
医院护士求职自荐信格式
2013/09/21 职场文书
中专毕业生个人职业生涯规划
2014/02/19 职场文书
《植物妈妈有办法》教学反思
2014/02/25 职场文书
地理教师岗位职责
2014/03/16 职场文书
镇副书记专题民主生活会对照检查材料思想汇报
2014/10/02 职场文书
岳麓书院导游词
2015/02/03 职场文书
团员年度个人总结
2015/02/26 职场文书