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 相关文章推荐
jQueryUI的Dialog的简单封装
Jun 07 Javascript
gridview生成时如何去掉style属性中的border-collapse
Sep 30 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
Feb 03 Javascript
js实现鼠标经过时图片滚动停止的方法
Feb 16 Javascript
jquery html动态添加的元素绑定事件详解
May 24 Javascript
jQuery.uploadify文件上传组件实例讲解
Sep 23 Javascript
webpack独立打包和缓存处理详解
Apr 03 Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
Sep 17 Javascript
Vue数字输入框组件示例代码详解
Jan 15 Javascript
Vue组件模板的几种书写形式(3种)
Feb 19 Javascript
修改Vue打包后的默认文件名操作
Aug 12 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
php5编程中的异常处理详细方法介绍
2008/07/29 PHP
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
PHP使用file_get_content设置头信息的方法
2016/02/14 PHP
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
JS获取地址栏参数的几种方法小结
2014/02/28 Javascript
jquery取子节点及当前节点属性值的方法
2014/09/09 Javascript
JavaScript实现文字跟随鼠标特效
2015/08/06 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
2019/04/02 Javascript
如何用原生js写一个弹窗消息提醒插件
2019/05/24 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
2020/03/07 Javascript
vue form表单post请求结合Servlet实现文件上传功能
2021/01/22 Vue.js
学习python的几条建议分享
2013/02/10 Python
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
在Pycharm中对代码进行注释和缩进的方法详解
2019/01/20 Python
Numpy将二维数组添加到空数组的实现
2019/12/05 Python
python支持多线程的爬虫实例
2019/12/21 Python
详解python metaclass(元类)
2020/08/13 Python
详解Python GUI编程之PyQt5入门到实战
2020/12/10 Python
你不知道的5个HTML5新功能
2016/06/28 HTML / CSS
Clarks鞋法国官方网站:英国其乐鞋品牌
2018/02/11 全球购物
现金出纳岗位职责
2014/03/15 职场文书
抗洪抢险事迹材料
2014/05/06 职场文书
幼儿园教师师德师风演讲稿:我自豪我是一名幼师
2014/09/10 职场文书
2015年党员个人剖析材料
2014/12/18 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书
网络舆情信息简报
2015/07/21 职场文书
2016入党积极分子考察评语
2015/12/01 职场文书
幼儿园班级管理心得体会
2016/01/07 职场文书
2016年教师党员公开承诺书
2016/03/24 职场文书
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python