querySelector vs getElementsByClassName

Benchmark created by MV on

Preparation HTML

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

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 testDivs = Array.prototype.filter.call(fooElements, function(fooElement){
    return fooElement.nodeName === 'DIV';
});
ready

Revisions

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