DOM queries

Benchmark created by Carlos on


Description

Testing multiple types of DOM queries against each other

Preparation HTML

<div id="parent_element">
    <div class="salt myClass pepper">
    </div>
    <div class="salt myClass pepper">
       <div class="salt myClass pepper">
          <div id="mySelectId"></div>
       </div>
    </div>
</div>
<div id="second_element">
    <div class="salt myClass pepper">
    </div>
</div>

Setup

var p = document.getElementById("parent_element");
    var c = ".myClass";
    var id = "#mySelectId";
    var e;

Test runner

Ready to run.

Testing in
TestOps/sec
getElementById
e = document.getElementById(id.slice(1));
ready
getElementsByClassName
if(c.match(/^\.[a-zA-Z0-9_-]+$/)) e = document.getElementsByClassName(c.replace(".", ""));
ready
querySelectorAll
e = p.querySelectorAll(c);
ready
querySelector
e = p.querySelector(id);
ready

Revisions

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

  • Revision 1: published by Carlos on