记录学习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>