javascript getElementsByClassName implementation code_javascript skills

Let’s take a look at the code first: (supports multiple class queries and queries within a certain range)

Copy code The code is as follows:

/*
* Get the element collection according to the element clsssName
* @param fatherId The ID of the parent element, the default is document
* @tagName The tag name of the child element
* @className ClassName string separated by spaces
*/
function getElementsByClassName(fatherId,tagName,className){
node = fatherId&&document.getElementById(fatherId) || document;
tagName = tagName | | "*";
className = className.split(" ");
var classNameLength = className.length;
for(var i=0,j=classNameLength;i//Create a regular match for class names
className[i]= new RegExp("(^|\s)" className[i].replace(/-/g, "\-") "(\s |$)");
}
var elements = node.getElementsByTagName(tagName);
var result = [];
for(var i=0,j=elements.length,k= 0;ivar element = elements[i];
while(className[k ].test(element.className)){//Optimization loop
if(k === classNameLength){
result[result.length] = element;
break;
}
}
k = 0;
}
return result ;
}

Okay, let’s test it:

Copy the code The code is as follows:

Copy code The code is as follows:

window.onload = function(){
alert(getElementsByClassName(document,"div ","aaa ccc").length);//2
alert(getElementsByClassName("container","div","aaa ccc").length);//1
alert(getElementsByClassName("container ","span","aaa zzz").length);//1
}

Get the result correctly.
Native getElementsByClassName
Some people may ask, the native method is the most efficient to call. Many browsers have already implemented the getElementsByClassName method. So why is it not calling the native method first and then calling the custom one?
Yes, the native efficiency is very high. It supports queries with multiple class conditions, but the biggest problem is that it does not support getElementsByClassName("container", "div", "aaa ccc"), which requires specifying tags. Find the situation where the specified element is of the specified class.
So, the native method call is abandoned here.
About loop optimization
In the code, you will see that I cache the length of the array, which can improve efficiency. In fact, there is a very hidden problem here, that is, there is a big difference between accessing the length property of an array and accessing the length of HtmlCollection. In an array, length is an ordinary property, and no additional operations are performed when accessed. Let's take a look at HTMLCollection. We often use HTMLCollection as an array, but in fact, it is an entity that changes automatically according to the DOM structure. object. Every time a property of an HTMLCollection object is accessed, it will perform a complete match on all nodes in the DOM. In other words, every time the length of the HtmlCollection object is accessed, the collection object will be updated, which consumes a lot of performance. Therefore, under normal circumstances, it is recommended to cache length for this kind of loop operation of HtmlCollection.
Extra gains
This is about efficiency comparison between ways of putting elements into arrays
Look at the code:

Copy code The code is as follows:

//Method 1
var arr = [];
var start = new Date();
for( var i=0;iarr.push(i);
}
//Method 2
var arr = [];
var start = new Date ();
for(var i=0;iarr[arr.length]=i;
}

Guess which one is more efficient! After testing, the second method is more efficient than the first.
Reminder:
This version is not compatible with IE5. The following is my explanation:
1. When you look at the statistics of a few thousandths, look at the crazy money IE5 testers With so many clicks and the curiosity of professional programmers towards IE5, it is estimated that only the ashes left after IE5 was burned.
2. You have to believe that the use value of ashes tends to zero
3. If you haven’t been convinced yet, then I want to say that you are very professional! In this case, there are still IE3, IE2, IE?FF1,NN4..., I think you should implement them all.
Some confession: I can't convince myself very much. Alas, let's give a solution for IE5:
IE5 does not support the getElementByTagName("*") form, so I need to deal with it here:
var elements = (tagName===='*'&&node.all)?node.all:node.getElementsByTagName(tagName);
Okay, not much to say, this function is simple and practical, I also wrote the code After reading the comments, there should be no problem.