getElementById vs. getElementsByClassName vs. querySelector vs. jQuery (v184)

Revision 184 of this benchmark created on

Description

Compare the speed of getElementById to getElementsByClassName to querySelector to jQuery returns of each of those selectors.

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<p id="foo" class="my-foo">
  Foo
</p>
<p id="bar" class="my-bar">
  Bar
</p>
<div id="poo" class="my-poo">
  <div id="par" class="my-bar">
    <div id="paz" class="my-bar">
      <span id="baz" class="my-baz">
        Baz
      </span>
    </div>
  </div>
</div>

Test runner

Ready to run.

Testing in
TestOps/sec
getElementById
var bar = document.getElementById("bar");
var poo = document.getElementById("poo");
ready
querySelector (ID)
var bar = document.querySelector("#bar");
var poo = document.querySelector("#poo");
ready
jQuery(ID)
var bar = $("#bar");
var poo = $("#poo");
ready
getElementsByClassName
var bar = document.getElementsByClassName("my-bar")[0];
var poo = document.getElementsByClassName("my-poo")[0];
ready
querySelector (Class)
 
ready
jQuery(Class)
 
ready

Revisions

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