用原生dom的方法获取class对象(很简单实用)

时间:2021-04-20 13:42:16

话不多说,直接上代码,用的是for(var i in array)

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>用原生dom的方法获取class对象(很简单实用)</title>
 6 <style>
 7 .ca{background:red;padding:20px;}
 8 .js{border:1px solid #00f;padding:10px;}
 9 </style>
10 <script>
11 function getElementsClass(classnames){
12     var classobj = new Array();  //定义数组
13     var classint = 0; //定义数组的下标
14     var tags = document.getElementsByTagName('*');
15     for(var i in tags){ //对标签进行遍历
16         if(tags[i].nodeType == 1){ //判断节点类型
17             if(tags[i].getAttribute('class') == classnames){ //判断和需要class名字相同的,并组成一个数组
18                classobj[classint] = tags[i]; 
19                classint++;    
20             }
21         }
22     }
23     return classobj;  //返回组成的数组
24 }
25 window.onload = function(){
26        var a = getElementsClass('ca');
27     a[0].onclick = function(){alert('we are 伐木累');}
28     a[1].innerHTML = ' we are 伐木累!';
29     var div = document.createElement('div');  // 创建一个div元素节点
30     var div_text = document.createTextNode('我是你的文本'); //创建一个文本节点 
31     div.style.cssText = 'width:200px;height:300px;background:blue;color:white';  //设置最后添加的div的样式
32     div.appendChild(div_text);  //把文本加到div中
33     document.body.appendChild(div); //为body添加最后一个子节点,
34 }
35 </script>
36 </head>
37 
38 <body>
39 <div class="ca">
40 sosososo
41 </div>
42 <div class="js" id="as">
43 2</div>
44 <div class="bd">
45 3</div>
46 <div class="ca">
47 </div>
48 </body>
49 </html>