getElementById vs. getElementsByClassName vs. querySelector vs. jQuery vs xpath (v145)

Revision 145 of this benchmark created by ZAlexz on

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<p id="bar" class="my-bar">
  Bar
</p>
<div id="coo" class="my-foo">
  <div id="car" class="my-bar">
    <div id="caz" class="my-bar">
<div id="hoo" class="my-boo">
  <div id="har" class="my-bar">
    <div id="haz" class="my-bar">
<div id="yoo" class="my-boo">
  <div id="yar" class="my-bar">
    <div id="yaz" class="my-bar">
<div id="zoo" class="my-boo">
  <div id="zar" class="my-bar">
    <div id="zaz" class="my-bar">

      <span id="baz" class="my-baz">Baz</span>

    </div>
  </div>
</div>
    </div>
  </div>
</div>
    </div>
  </div>
</div>
    </div>
  </div>
</div>

Setup

function q(id){ return new Elem(document.getElementById(id));
    }
    
    var haz = document.getElementById('zaz');
    
    function Elem(el){ this._el = el; }
    Elem.prototype.append = function(){ this._el.appendChild(el); return this; }
    
    function qq(_class){ return document.getElementsByClassName(_class); }
    function qqTag(tag){ return document.getElementsByTagName(tag); }

Test runner

Ready to run.

Testing in
TestOps/sec
getElementById
var baz = document.getElementById("baz");
ready
q(id)
var bar = q('baz');
ready
el.getElementsByClassName
var baz = haz.getElementsByClassName('my-baz');
 
ready
qq(class)
var baz = qq('my-baz');
ready

Revisions

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