document.getElementsByClassName兼容问题

在新手使用原生JavaScript时，常常会用到document.getElementById、document.getElementsByClassName以及document.getElementsByTagName等方式来获取到元素，进而对其进行操作。但IE9以下的版本却不支持document.getElementsByClassName方法，所以很多刚开始接触js的同学往往会很困惑这个问题。这里封装了一下三种方法的的函数，使其都能完美使用三种方法，希望能对大家有所帮助。

这里使用的$符号作为函数名。同时在传递参数时，第二个参数可以不写。

[javascript]  view plain  copy

1. // 可以根据 id、class、element 查找元素   
2. // param (字符串) : #id    .class    tag  
3. // obj : 父元素  

[javascript]  view plain  copy

1. //首先判断通过哪种方式获取元素  
2. function $(param, obj) { // #box  
3.     obj = obj || document; // 没有传递 obj 参数，则默认使用 document  
4.     if (param.charAt(0) === "#") // 通过id名获取元素  
5.         return document.getElementById(param.slice(1));//这里的slice是字符串的一个函数，用于获取第2个元素及之后的字符串  
6.     if (param.indexOf(".") === 0) //<span style="font-family: Arial, Helvetica, sans-serif;">通过class名获取元素</span>  
7.         return getByClass(param.slice(1), obj);//调用下面的getClass函数  
8.   
9.     return obj.getElementsByTagName(param); // tag  
10. }  
11.   
12. // 如何解决 getElementsByClassName 兼容问题  
13. function getByClass(className, obj) {  
14.     obj = obj || document;  

[javascript]  view plain  copy

1. <span style="white-space:pre">    </span>//如果浏览器支持此方法就直接调用  
2.     if (obj.getElementsByClassName) // 支持 getElementsByClassName 方法的使用  
3.         return obj.getElementsByClassName(className);  
4.     /* 不支持 getElementsByClassName 方法的使用 */  
5.     // 保存所有查找到的元素的数组结构  
6.     var result = [];   
7.     // 查找出 obj 对象后代所有元素  
8.     var tags = obj.getElementsByTagName("*");  
9.     // 遍历每个元素  
10.     for (var i = 0, len = tags.length; i < len; i++) {  
11.         // 获取到当前遍历元素所使用的所有类名  
12.         var classNames = tags[i].className.split(" ");  
13.         // 遍历当前元素的每个类名  
14.         for (var j = 0, l = classNames.length; j < l; j++) {  
15.             if ( classNames[j] === className ) { // 说明当前遍历到的元素使用过要查找的类名  
16.                 result.push(tags[i]);  
17.                 break;  
18.             }  
19.         }  
20.     }  
21.   
22.     // 返回结果集  
23.     return result;  
24. }  

下面的函数在确定浏览器不支持document.getElementsByClassName方法后，将传进来的父元素的子元素添加到一个数组中，之后对其进行遍历，将其元素的类名通过空格拆分（即split方法），最后对类名进行判断，将包含所需类名的元素名通过push（）保存到数组result中，最后返回result。