Specific selection using querySelector vs getElementsByClassName vs getElementsByTagName (v2)

Revision 2 of this benchmark created by MV on

Preparation HTML

<div class="foo"></div>
<div class="bar"></div>
<div class="foo baz"></div>
<span class="foo"></span>
<span class="bar"></span>
<div class="bar"></div>
<div class="foo"></div>

Test runner

Ready to run.

Testing in
TestOps/sec
query selector
var foos = document.querySelectorAll('div .foos');
ready
by classname
var fooElements = document.getElementsByClassName('foo');
var fooDivs = Array.prototype.filter.call(fooElements, function(fooElement){
    return fooElement.nodeName === 'DIV';
});
ready
by tagname
var divs = document.getElementsByTagName('div');
var fooDivs = Array.prototype.filter.call(divs, function(div) {
    if(div.className.indexOf('foo') != -1) {
        return div
    }
});
ready

Revisions

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