querySelectorAll vs getElementsByTagName (v42)

Revision 42 of this benchmark created by Jim Montgomery on

Description

Checking how querySelectorAll('parent child') or '.parent .child' selection performs against combinations of getElementsByTagName, getElementsByClassName and jQuery

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<ul class="root-ul"><li><a class="link word" href="#word">word</a>
</li><li><a class="link glass" href="#glass">glass</a>
</li><li><a class="link lorum" href="#lorum">lorum</a>
</li><li><a class="link ipsum" href="#ipsum">ipsum</a>
</li><li><a class="link dolor" href="#dolor">dolor</a>
</li><li><a class="link sit-amet" href="#sit-amet">sit-amet</a>
</li></ul>

Teardown


    window.console && console.log && console.log('nodes:',nodes.length, nodes);

Test runner

Ready to run.

Testing in
TestOps/sec
querySelectorAll
var root = document.querySelectorAll('ul .link'),
    nodes = [], l, i, push = Array.prototype.push;
for (i = 0, l = root.length; i < l; i++) {
  push.apply(nodes, root[i].getElementsByTagName('a'));
}
ready
getElementsByTagName + getElementsByTagName
var root = document.getElementsByTagName('ul'),
    nodes = [], l, i, push = Array.prototype.push;
for (i = 0, l = root.length; i < l; i++) {
  push.apply(nodes, root[i].getElementsByTagName('a'));
}
ready
getElementsByTagName + getElementsByClassName
var root = document.getElementsByTagName('ul'),
    nodes = [], l, i, push = Array.prototype.push;
for (i = 0, l = root.length; i < l; i++) {
  push.apply(nodes, root[i].getElementsByClassName('link'));
}
ready
getElementsByClassName + getElementsByClassName
var root = document.getElementsByClassName('root-ul'),
    nodes = [], l, i, push = Array.prototype.push;
for (i = 0, l = root.length; i < l; i++) {
  push.apply(nodes, root[i].getElementsByClassName('link'));
}
ready
getElementsByClassName + getElementsByTagName
var root = document.getElementsByClassName('root-ul'),
    nodes = [], l, i, push = Array.prototype.push;
for (i = 0, l = root.length; i < l; i++) {
  push.apply(nodes, root[i].getElementsByTagName('a'));
}
ready
jQuery by CSS class
var nodes = jQuery('.root-ul .link');
ready
jQuery by Tag + class
var nodes = jQuery('ul .link');
ready
jQuery by class + Tag
var nodes = jQuery('.root-ul a');
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.