When new users use native JavaScript, they often use document.getElementById, document.getelementbyclassname and document.getElementsByTagName to get elements and then operate them. However, the document.getElementsByClassName method is not supported in the version below IE9, so many students who are new to js are often confused about this problem. Here we encapsulate the functions of the three methods, so that they can perfectly use the three methods, hoping to help you.

The $symbol used here is the function name. At the same time, when passing parameters, the second parameter can not be written.

1. //First, determine which way to get the elements  
2. function $(param, obj) { // #box  
3.     obj = obj || document; //If obj parameter is not passed, document is used by default  
4.     if (param.charAt(0) === "#") //Get element by id name  
5.         return document.getElementById(param.slice(1));//slice here is a function of string, used to get the second element and the string after it  
6.     if (param.indexOf(".") === 0) //< span style = "font family: Arial, Helvetica, sans serif;" > get elements by class name</span>  
7.         return getByClass(param.slice(1), obj);//Call the following getClass function  
8.   
9.     return obj.getElementsByTagName(param); // tag  
10. }  
11.   
12. //How to solve the compatibility problem of getElementsByClassName  
13. function getByClass(className, obj) {  
14.     obj = obj || document;  

1. <span style="white-space:pre">    </span>//If the browser supports this method, it directly calls  
2.     if (obj.getElementsByClassName) //Support the use of getElementsByClassName method  
3.         return obj.getElementsByClassName(className);  
4.     /* The use of the getElementsByClassName method is not supported*/  
5.     //Save the array structure of all found elements  
6.     var result = [];   
7.     //Find out all elements of the descendants of obj object  
8.     var tags = obj.getElementsByTagName("*");  
9.     //Traverse each element  
10.     for (var i = 0, len = tags.length; i < len; i++) {  
11.         //Gets all class names used by the current traversal element  
12.         var classNames = tags[i].className.split(" ");  
13.         //Traverses each class name of the current element  
14.         for (var j = 0, l = classNames.length; j < l; j++) {  
15.             if ( classNames[j] === className ) { //Indicates that the currently traversed element has used the class name to find  
16.                 result.push(tags[i]);  
17.                 break;  
18.             }  
19.         }  
20.     }  
21.   
22.     //Return result set  
23.     return result;  
24. }  

After confirming that the browser does not support the document.getElementsByClassName method, the following function adds the child elements of the passed in parent element to an array, traverses it, splits the class names of its elements through spaces (that is, split method), judges the class names, saves the element names containing the required class names into the array result through push(), and finally Return result.