Specific selection using querySelector vs getElementsByClassName vs getElementsByTagName

Benchmark created by MV on

Description

This test is designed to select only divs with class names of foo.

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
querySelector
var foos = document.querySelectorAll('div .foos');
ready
getElementsByClassName
var fooElements = document.getElementsByClassName('foo');
var fooDivs = Array.prototype.filter.call(fooElements, function(fooElement){
    return fooElement.nodeName === 'DIV';
});
ready
getElementsByTagName
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.