ie8及其以下浏览器的document.getElementsByClassName兼容性问题

使用JavaScript访问DOM的一个重大问题是,此过程需要一种通过元素类名称来选择类的类函数,对DOMContentReady,这种类函数的缺失导致开发人员需要自己编写自定义脚本业执行上述任务,许多这个类脚本都是围绕着getElementByClassName()建立的,这种解决方法在HTML5中被标准化,另外,这种方法还本地存在于现代浏览器中,getElementByClassName()只使用一个字符串值作为输入.并返回一个Nodelist,这个NodeList包含所有类名称匹配这个字符串值的元素:
  var el = document.getElementsByClassName('foo');
  通过在字符串中使用空格分隔类,也可以匹配多个类,下面的代码挑选出了所有既拥有foo类名称又拥有bar类名称的元素:
  var el = document.getElementsByClassName('foo bar');
Google Chrome、Firefox、Opera、Safari、IE9及更新版本都支持javascript的document.getElementsByClassName函数，而IE6 IE7 IE8不支持document.getElementsByClassName，我们只能自己给document增加一个自定义函数getElementsByClassName，让IE 6-8也支持document.getElementsByClassName 以下是IE6 IE7 IE8 document.getElementsByClassName的代码及实例。

（Xee：因为我要兼容IE8浏览器… 这里有几个比较高效的方法,它们会先检测是否支持getElementsByClassName，支持了就使用原生的该方法…）

//-----------------------------✄---经过修正之后的--------------------------------------
//------------------------------✄--使用document.getElementsByClassName()调用---------------------------- 
if(!document.getElementsByClassName){
document.getElementsByClassName = function(className){
var children = 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;
};
}
//------------------------------✄--这两个函数相似----------------------------//-------------------------✄--使用getElementsByClassName()调用------------------- 
 
 function getElementsByClassName(strClass){
    if(document.getElementsByClassName){
        return document.getElementsByClassName(strClass);
    }
    strClass=strClass.replace(/^ +| +$/g,"");
    var aClass=strClass.split(/ +/);
    var eles=document.getElementsByTagName("*");
    for(var i=0;i<aClass.length;i++){
        var a=[]
        var reg=new RegExp("(^| )"+aClass[i]+"( |$)");
        for(var j=0;j<eles.length;j++){
            var ele=eles[j];
            if(reg.test(ele.className)){
                a.push(ele);
            }
        }
        eles=a;
    }
    return eles;
}

下面这个方法也使用了正则进行匹配的..使用document.getElementsByClassName()调用..

/* 为IE6 IE7 IE8增加document.getElementsByClassName函数 */
/MSIE\s*(\d+)/i.test(navigator.userAgent);
var isIE=parseInt(RegExp.$1?RegExp.$1:0);
if(isIE>0&&isIE<9){
        document.getElementsByClassName=function(cls){
                var els=this.getElementsByTagName('*');
                var ell=els.length;
                var elements=[];
                for(var n=0;n<ell;n++){
                        var oCls=els[n].className||'';
                        if(oCls.indexOf(cls)<0)        continue;
                        oCls=oCls.split(/\s+/);
                        var oCll=oCls.length;
                        for(var j=0;j<oCll;j++){
                                if(cls==oCls[j]){
                                        elements.push(els[n]);
                                        break;
                                }
                        }
                }
                return elements;
        }
}
onload=function(){
        var els=document.getElementsByClassName('xc');
        var l=els.length;
        for(var n=0;n<l;n++){
                alert(els[n].outerHTML);
        }
}

就介绍了这些方法，可以选用比较短小的使用，注意使用的参数…（Xee困惑:上面的都是一个参数（即要查询的那个class名）。）

再附录实例：//---------------------------------------------------------------------✄------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="zh" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>用原生JS获取CLASS对象</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="generator" content="EverEdit" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
 
</head>
<body>
    <div id="w2" class="test">
        <span class="test"></span>
    </div>
    <div id="w1" class="test">
        <div id="ce" class="test">
            <ul>
                <li class="q">qw1</li>
                <li class="q">qw2</li>
                <li class="ww">ww</li>
                <li class="a">a</li>
                <li class="bbb">bbb</li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
<script type="text/javascript">
 if(!document.getElementsByClassName){
document.getElementsByClassName = function(className){
var children = 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;
};
}
 document.getElementsByClassName("ww")[0].style.color='red'; //演示：查找css类名为"ww"的标签个数
</script>
</body>
</html>
posted @ 2014-11-29 20:59  爱好和平的阿道夫  阅读(884)  评论(0)  编辑  收藏  举报