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

Revision 58 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 baz = document.getElementById("baz");
ready
querySelector (ID)
var baz = document.querySelector("#baz");
ready
jQuery ID Selector
var baz = $("#baz");
ready
getElementsByClassName
var baz = document.getElementsByClassName("my-baz");
ready
querySelector (Class)
var poo = document.querySelector(".my-baz");
ready
getElementsByTagName
var span = document.getElementsByTagName("span")
ready
jQuery Class Selector
var baz = $(".my-baz");
ready

Revisions

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