getElementById vs. querySelector (v137)

Revision 137 of this benchmark created by ro on

Preparation HTML

<div id="holdem">
</div>
<script>
for (var i = 0; i < 1000; i++) {
    var elem = document.createElement('div');
    if (i !== 500) {
      elem.className = 'dontFind';
      elem.id = "dontFind";
    } else {
      elem.className = 'findMe';
      elem.id = "findMe";
    }
    document.querySelector("#holdem").appendChild(elem);
}
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
getElementById
var found = document.getElementById("findMe");
ready
getElementsByClassName
var found = document.getElementsByClassName("findMe");
ready
querySelector(id)
var found = document.querySelector("#findMe");
ready
querySelector(class)
var found = document.querySelector(".findMe");
ready
querySelector(tag#id)
var found = document.querySelector("div#findMe");
ready
querySelector(tag.class)
var found = document.querySelector("div.findMe");
ready

Revisions

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