Jquery element+class selector performance

Question

I was hoping $('#childDiv2 .txtClass') or $('#childDiv2 input.txtClass') perform better when selecting <input type="text" id="txtID" class="txtClass"/> element. But according to this performance analysis $('.txtClass'); is the best selector among this. I'm using JQuery 1.7.2 Does anybody have explanation for this?

HTML

<div class="childDiv2">     <input type="text" id="txtID" class="txtClass"/>     <p class="child">Blah Blah Blah</p> </div>​ 

JS

$('.txtClass'); $('#childDiv2 .txtClass') $('#childDiv2 > .txtClass') $('input.txtClass') $('#childDiv2 input.txtClass') 

Answer 1

Modern browsers expose a very efficient getElementsByClassName() method that returns the elements having a given class. That's why a single class selector is faster in your case.

To elaborate on your examples:

$(".txtClass")                  =>  getElementsByClassName()  $("#childDiv2 .txtClass")       =>  getElementById(),                                     then getElementsByClassName()  $("#childDiv2 > .txtClass")     =>  getElementById(),                                     then iterate over children and check class  $("input.txtClass")             =>  getElementsByTagName(),                                     then iterate over results and check class  $("#childDiv2 input.txtClass")  =>  getElementById(),                                     then getElementsByTagName(),                                     then iterate over results and check class 

As you can see, it's quite logical for the first form to be the fastest on modern browsers.