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

Revision 86 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://code.jquery.com/jquery-git2.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>
      <span id="badumtss" class="m">
        Baz
      </span>
    </div>
  </div>
</div>

Test runner

Ready to run.

Testing in
TestOps/sec
getElementById
var bar = document.getElementById("bar");
ready
querySelector (ID)
var bar = document.querySelector("#bar");
ready
getElementsByClassName
var bar = document.getElementsByClassName("my-bar");
ready
getElementById qSA Context
var poo = document.getElementById("poo").querySelectorAll(".my-bar");
ready
jQuery Wrapped Selector
var bar = $(document.getElementById("poo").querySelectorAll(".my-bar"));
ready
short getElementsByClassName
var bar = document.getElementsByClassName("m");
ready
querySelectorAll combined
var bar = document.querySelectorAll("#poo .my-bar")
ready
getElementById then className
var poo = document.getElementById("poo").getElementsByClassName("my-bar");
ready
jQuery separate ID's
var bar = $("#bar");
var poo = $("#poo");
ready
jQuery .add
var bar = $("#bar").add("#poo")
ready

Revisions

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