document.getElementsByClassName compatibility issues

Keywords: Javascript

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. //You can find elements by id, class, element
  2. //param (string): ාid.class tag
  3. //obj: parent element
  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  
  9.     return obj.getElementsByTagName(param); // tag  
  10. }  
  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.     }  
  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.

Posted by hthighway on Sat, 02 May 2020 15:54:03 -0700