getElementById vs getElementsByClassName vs querySelector (v8)

Revision 8 of this benchmark created on

Preparation HTML

<div class="class1" id="id1" name="name1" title="title1">
</div>
<div class="class2" id="id2" name="name2" title="title2">
</div>
<div class="class3" id="id3" name="name3" title="title3">
</div>
<div class="class4" id="id4" name="name4" title="title4">
</div>
<div class="class5" id="id5" name="name5" title="title5">
</div>
<div class="class6" id="id6" name="name6" title="title6">
</div>
<div class="class7" id="id7" name="name7" title="title7">
</div>
<div class="class8" id="id8" name="name8" title="title8">
</div>
<div class="class9" id="id9" name="name9" title="title9">
</div>
<div class="class10" id="id10" name="name10" title="title10">
</div>
<div class="class11" id="id11" name="name11" title="title11">
</div>
<div class="class12" id="id12" name="name12" title="title12">
</div>
<div class="class13" id="id13" name="name13" title="title13">
</div>
<div class="class14" id="id14" name="name14" title="title14">
</div>
<div class="class15" id="id15" name="name15" title="title15">
</div>
<div class="class16" id="id16" name="name16" title="title16">
</div>
<div class="class17" id="id17" name="name17" title="title17">
</div>
<div class="class18" id="id18" name="name18" title="title18">
</div>
<div class="class19" id="id19" name="name19" title="title19">
</div>
<div class="class20" id="id20" name="name20" title="title20">
</div>
<div class="class21" id="id21" name="name21" title="title21">
</div>
<div class="class22" id="id22" name="name22" title="title22">
</div>
<div class="class23" id="id23" name="name23" title="title23">
</div>
<div class="class24" id="id24" name="name24" title="title24">
</div>
<div class="class25" id="id25" name="name25" title="title25">
</div>
<div class="class26" id="id26" name="name26" title="title26">
</div>
<div class="class27" id="id27" name="name27" title="title27">
</div>
<div class="class28" id="id28" name="name28" title="title28">
</div>
<div class="class29" id="id29" name="name29" title="title29">
</div>
<div class="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
getElementById
for (var i = 1; i <= 30; i++) {
  var x = document.getElementById("id" + i);
};
ready
getElementsByClassName
for (var i = 1; i <= 30; i++) {
  var x = document.getElementsByClassName("class" + i)[0];
};
ready
querySelector class
for (var i = 1; i <= 30; i++) {
  var x = document.querySelector(".class" + i);
};
ready
querySelector id
for (var i = 1; i <= 30; i++) {
  var x = document.querySelector("#id" + i);
};
ready
querySelector class2
for (var i = 1; i <= 30; i++) {
  var x = document.querySelector("div.class" + i);
};
ready
getElementsByName
for (var i = 1; i <= 30; i++) {
  var x = document.getElementsByName("name" + i);
}
ready
getElementsByTagName
for (var i = 1; i <= 30; i++) {
  var x = document.getElementsByTagName("div");
}
ready
getAttribute
for (var i = 1; i <= 30; i++) {
  var x = document.getElementsByTagName('div');
  var obj = x[i].getAttribute('title');
}
ready

Revisions

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