getElementById with getElementsByClassName vs. querySelectorAll (v200)

Revision 200 of this benchmark created by lokait on

Preparation HTML

<div id="foo">
<div class="pps"></div>
<div class="pps"></div>
<div class="pps">
<div class="pfr"></div>
<div class="pfr"></div>
<div class="pfr"></div>
</div>
<div class="pps"></div>
<div class="pps"></div>
</div>
<div id="bar">
<div class="pps"></div>
<div class="pps"></div>
<div class="pps">
<div class="pfr"></div>
<div class="pfr"></div>
<div class="pfr"></div>
</div>
<div class="pps"></div>
<div class="pps"></div>
</div>
<div id="baz">
<div class="pps"></div>
<div class="pps"></div>
<div class="pps">
<div class="pfr"></div>
<div class="pfr"></div>
<div class="pfr"></div>
</div>
<div class="pps"></div>
<div class="pps"></div>
</div>
<div id="car">
<div class="pps"></div>
<div class="pps"></div>
<div class="pps">
<div class="pfr"></div>
<div class="pfr"></div>
<div class="pfr"></div>
</div>
<div class="pps"></div>
<div class="pps"></div>
</div>


<div id="batman">

<div class="sss">
<div class="rfr"></div>
<div class="rfr"></div>
<div class="rfr"></div>
</div>

<div class="sss">
<div class="str"></div>
<div class="str"></div>
<div class="str"></div>
</div>

<div class="sss">
<div class="sre"></div>
<div class="sre"></div>
<div class="sre"></div>
</div>

<div class="sss">
<div class="sref"></div>
<div class="sref"></div>
<div class="sref"></div>
</div>

<div class="sss">
<div class="syef"></div>
<div class="syef"></div>
<div class="syef"></div>
</div>

</div>

<div id="rar">
<div class="pps"></div>
<div class="pps"></div>
<div class="pps">
<div class="pfr"></div>
<div class="pfr"></div>
<div class="pfr"></div>
</div>
<div class="pps"></div>
<div class="pps"></div>
</div>
<div id="xaz">
<div class="pps"></div>
<div class="pps"></div>
<div class="pps">
<div class="pfr"></div>
<div class="pfr"></div>
<div class="pfr"></div>
</div>
<div class="pps"></div>
<div class="pps"></div>
</div>

<div id="batman_c">

</div>

<div id="batman_c_two">

</div>

Test runner

Ready to run.

Testing in
TestOps/sec
getElementById with getElementsByClassName
var bar = document.getElementById("batman");
var bat = bar.getElementsByClassName("sss");
for (var i = 0; i < bat.length; i++) {
  document.getElementById("batman_c").innerHTML += bat[i].innerHTML;
}
ready
querySelectorAll
var batTwo = document.querySelectorAll("#batman > .sss");
for (var i = 0; i < batTwo.length; i++) {
  document.getElementById("batman_c_two").innerHTML += batTwo[i].innerHTML;
}
ready

Revisions

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