(023)javascript_dom_className 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>DOM</title>
 6     <script type="text/javascript">
 7 
 8         function getByClassNameNodes(parentNode,clazzName) {
 9 
10             var resultNodes = new Array();
11 
12             var nodesArr = parentNode.getElementsByTagName("*");
13 
14             for(var i = 0; i < nodesArr.length; i++) 
15             {
16                 if(nodesArr[i].className == clazzName)
17                 {
18                     resultNodes.push(nodesArr[i]);
19                 }
20             }
21 
22             return resultNodes;
23 
24         }
25 
26         window.onload = function() {
27 
28             var ulNode = document.getElementById("ulNode");
29             
30             var liNodeArr = document.getElementsByTagName("li");
31 
32             // for(var i = 0; i < liNodeArr.length; i++)
33             // {
34             //     if(liNodeArr[i].className == "myClass")
35             //     {
36             //         liNodeArr[i].style.background = "blue";
37             //     }
38             // }
39 
40             var resultNodes = getByClassNameNodes(ulNode,"myClass");
41             
42             for(var i = 0; i < resultNodes.length; i++) {
43 
44                 resultNodes[i].style.background = "blue";
45             }
46             
47         };
48         
49     </script>
50 </head>
51 
52 <body>
53     <ul id="ulNode">
54         <li>aaa</li>
55         <li class="myClass">aaa</li>
56         <li>aaa</li>
57         <li class="myClass">bbb</li>
58         <li>aaa</li>
59         <li class="myClass">ccc</li>
60         <li>aaa</li>
61         <li class="myClass">ddd</li>
62         <li>aaa</li>
63         <li class="myClass">eee</li>
64     </ul>
65 </body>
66 </html>

 

posted @ 2014-02-06 10:08  雪中飞雁  阅读(106)  评论(0)    收藏  举报