记录学习JavaScript中遇到的知识点

函数getElementsByClassName()的具体实现:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4     <meta charset="utf-8">
 5     <title>JavaScript Exercises.</title>
 6     </head>
 7     <body>
 8         <h1>getElementsByClassName.</h1>
 9         <span class="a">1</span>
10         <span class="a">2</span>
11         <p class="a">3</p>
12         <div class="b">4</div>
13         <strong class="b">5</strong>
14         <div id="wrapper"><strong class="b">6</strong></div>
15     </body>
16 </html>
17 <script type="text/JavaScript">
18 //接收三个函数,第一个参数class名必须,后两个参数可选,
19 //第二个参数为父容器(缺省为body节点),第三个为DOM节点的标签名。
20 function getElementsByClassName(str,root,tag){
21     if(root){
22         root=typeof root=="string" ? document.getElementById(root) : root;
23     }
24     else{//参数root缺省则为body节点
25         root=document.body;
26     }
27     tag=tag || "*";
28     var els=root.getElementsByTagName(tag),arr=[];
29     for(var i=0,n=els.length;i<n;i++){
30         for(var j=0,k=els[i].className.split(" "),l=k.length;j<l;j++){
31             if(k[j]==str){
32                 arr.push(els[i]);
33                 break;
34             }
35         }
36     }
37     return arr;
38 }
39 var aEls=getElementsByClassName("a"),
40     bEls=getElementsByClassName("b","wrapper"),
41     bEls2=getElementsByClassName("b",null,"strong");
42 alert(aEls.length);//3 (1,2,3)
43 alert(bEls.length);//1 (6)
44 alert(bEls2.length);//2 (5,6)
45 </script>
View Code