用原生JS获取CLASS对象(很简单实用)

http://www.jb51.net/article/56316.htm

 
<!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>
    
    <style>
    
    .ca{background-color:red; padding:20px;}
    
    .js{ border:1px solid #00F; padding:10px;}
    
    </style>
 
</head>
 
 
<body>
 
    <div class="ca"> sss </div>
    
    <div class="js" id="as"> </div>
    
    <div class="bd"> </div>
    
    <div class="ca"> </div>
 
</body>
 
</html>
 
<script>
 
function getElementsClass(classnames){
    var classobj= new Array();//定义数组
    
    var classint=0;//定义数组的下标
    
    var tags=document.getElementsByTagName("*");//获取HTML的所有标签
    
    for(var i in tags){//对标签进行遍历
    
        if(tags[i].nodeType==1){//判断节点类型
        
            if(tags[i].getAttribute("class") == classnames)//判断和需要CLASS名字相同的，并组成一个数组
            
            {
            
                classobj[classint]=tags[i];
                
                classint++;
            
            }
        
        }
    
    }
    
    return classobj;//返回组成的数组
    
}
 
 
//以下就是测试了
 
var a=getElementsClass("ca");
 
a[0].onclick=function(){alert("我们来了");}
 
a[1].innerHTML='我们来了';
 
</script>

有时候会有多个dom的class相同，可以这样处理：

复制代码 代码如下:

var a=getElementsClass("ca")；
for(var i=0;i<a.length;i++){
(function(i){
alert(a[i])
})(i)
}


如果有多个相同的class也可以一起用了，如果是想达到JQ哪里可以直接.click还需要做一些比较复杂的处理

 

posted on 2015-11-18 13:50  鬼鬼丫404  阅读(1369)  评论(0)    收藏  举报

导航