IE不支持getElementsByClassName最终完美解决方案

 更新时间:2012年12月17日 16:21:02   作者:  
目前可以这么解决,判断浏览器支不支持这个方法,如果支持就不管;如果不支持,就在document对象里加入getElementsByClassName这个方法,按兴趣的朋友可以了解下
目前可以这么解决,判断浏览器支不支持这个方法,如果支持就不管;如果不支持,就在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 数组的定义和数组的长度

    本文主要介绍javascript 数组的定义和数组的长度,比较简单,希望能给大家做一个参考。
    2016-06-06
  • JavaScript实现的GBK、UTF8字符串实际长度计算函数

    JavaScript实现的GBK、UTF8字符串实际长度计算函数

    这篇文章主要介绍了JavaScript实现的GBK、UTF8字符串实际长度计算函数,需要的朋友可以参考下
    2014-08-08
  • js获取height和width的方法说明

    js获取height和width的方法说明

    js获取height和width属性的值在日常开发中很常见,于是本人搜集整理了一下,感兴趣的朋友可以参考下
    2013-01-01
  • js中对象深拷贝方法总结

    js中对象深拷贝方法总结

    js深拷贝这个问题,在实际的工作和面试当中也是经常使用到的。
    还经常有一些公司要求,原生手写实现,这篇文章主要介绍了js中对象深拷贝方法总结,需要的朋友可以参考下
    2022-10-10
  • form表单序列化详解(推荐)

    form表单序列化详解(推荐)

    这篇文章主要介绍了form表单序列化操作,通过将表单中的键值序列化为可提交的字符串,并附上代码实例详细讲解了运行之后的结果,需要的朋友可以参考下
    2017-08-08
  • 荐书|您有一份JavaScript书单待签收

    荐书|您有一份JavaScript书单待签收

    &#8203;学习是一个持续不断的过程,在互联网技术里畅游的程序员们,对学习的渴望更是难以穷尽,下面这篇文章主要给大家分享了关于Javascript相关的书籍,对大家学习Javascript具有一定的参考学习价值,下面来一起看看吧。
    2017-07-07
  • 推荐10款扩展Web表单的JS插件

    推荐10款扩展Web表单的JS插件

    本篇文章给大家介绍了10款扩展Web表单的javascript的插件,一起跟着小编来学习下吧。
    2017-12-12
  • 简单介绍JavaScript中字符串创建的基本方法

    简单介绍JavaScript中字符串创建的基本方法

    这篇文章主要介绍了简单介绍JavaScript中字符串创建的基本方法,是JS入门学习中的基础知识,需要的朋友可以参考下
    2015-07-07
  • JavaScript学习笔记之JS对象

    JavaScript学习笔记之JS对象

    这篇文章向我们详细介绍了javascript中的对象,包括默认对象、数组对象、字符串对象、自定义对象,并通过示例对这4中对象做了对比分析,推荐给大家。
    2015-01-01
  • 深入了解javascript中的prototype与继承

    深入了解javascript中的prototype与继承

    本篇文章,小编将和大家一起深入了解javascript中的prototype与继承,有需要的朋友可以参考一下
    2013-04-04

最新评论