querySelectorAll vs getElementsByTagName (v43)

Revision 43 of this benchmark created 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]);
}
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.