getElementById vs getElementsByClassName vs querySelector (v21)

Revision 21 of this benchmark created on

Preparation HTML

<div class="bazinga class1" id="id1" name="name1" title="title1">
</div>
<div class="bazinga class2" id="id2" name="name2" title="title2">
</div>
<div class="bazinga class3" id="id3" name="name3" title="title3">
</div>
<div class="bazinga class4" id="id4" name="name4" title="title4">
</div>
<div class="bazinga class5" id="id5" name="name5" title="title5">
</div>
<div class="bazinga class6" id="id6" name="name6" title="title6">
</div>
<div class="bazinga class7" id="id7" name="name7" title="title7">
</div>
<div class="bazinga class8" id="id8" name="name8" title="title8">
</div>
<div class="bazinga class9" id="id9" name="name9" title="title9">
</div>
<div class="bazinga class10" id="id10" name="name10" title="title10">
</div>
<div class="bazinga class11" id="id11" name="name11" title="title11">
</div>
<div class="bazinga class12" id="id12" name="name12" title="title12">
</div>
<div class="bazinga class13" id="id13" name="name13" title="title13">
</div>
<div class="bazinga class14" id="id14" name="name14" title="title14">
</div>
<div class="bazinga class15" id="id15" name="name15" title="title15">
</div>
<div class="bazinga class16" id="id16" name="name16" title="title16">
</div>
<div class="bazinga class17" id="id17" name="name17" title="title17">
</div>
<div class="bazinga class18" id="id18" name="name18" title="title18">
</div>
<div class="bazinga class19" id="id19" name="name19" title="title19">
</div>
<div class="bazinga class20" id="id20" name="name20" title="title20">
</div>
<div class="bazinga class21" id="id21" name="name21" title="title21">
</div>
<div class="bazinga class22" id="id22" name="name22" title="title22">
</div>
<div class="bazinga class23" id="id23" name="name23" title="title23">
</div>
<div class="bazinga class24" id="id24" name="name24" title="title24">
</div>
<div class="bazinga class25" id="id25" name="name25" title="title25">
</div>
<div class="bazinga class26" id="id26" name="name26" title="title26">
</div>
<div class="bazinga class27" id="id27" name="name27" title="title27">
</div>
<div class="bazinga class28" id="id28" name="name28" title="title28">
</div>
<div class="bazinga class29" id="id29" name="name29" title="title29">
</div>
<div class="bazinga class30" id="id30" name="name30" title="title30">
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
getElementsByClassName
var collection = document.getElementsByClassName('bazinga');
ready
querySelectorAll
var collection = document.querySelectorAll('.bazinga');
ready

Revisions

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