getElementsByClassName

时间:2023-03-08 16:13:11
getElementsByClassName

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<ul id="ul">
    <li class="red">0000000</li>
    <li class="green">11111<a href="#" class="reds red  ">11</a>11</li>
    <li class="   red ss">2222222222</li>
    <li class="   022 sda   ">3333333<b class="red">333</b>33</li>
</ul>
</body>
</html>
<script type="text/javascript">
var wzw={
    //清楚字符串里面的开始和结束的空格还有合并中间的多个空格为一个空格
    trim:function(str){
        var reg=/\s+/g;
        var a=/^\s/;
        var b=/\s$/;
        return str.replace(b,"").replace(a,"").replace(reg," ");
        },
    //获取制定的class    元素
    getByClass:function (id,oClass){
        var re=[];
        if(document.getElementsByClassName){
            re=id.getElementsByClassName(oClass);
        }else{
        
    var aChild=id.getElementsByTagName("*");
    var reg=new RegExp("\\b" + oClass + "\\b");
    for(var i=0;i<aChild.length;i++){
        if(aChild[i].nodeType=="1"){
            var aClassCllect=aChild[i].className;
            //var jianhua=wzw.trim(aClassCllect);
            if(reg.test(aClassCllect)){
                    re.push(aChild[i]);
                };
        }        
    }
        
    }
        return re;
    }
    
}

var oUl=document.getElementById("ul");
    var s=wzw.getByClass(oUl,"red");
    
    for(var i=0;i<s.length;i++){
        s[i].style.color="red";    
    }

</script>