Different types of selecting

JavaScript performance comparison

Test case created by birjolaxew

Preparation code

<div id="test1">
  <ul class="test2">
    <li class="test3">Element</li>
    <li>Element</li>
    <li>Element</li>
    <li>Element</li>
  </ul>
</div>
    

Preparation code output

<div id="test1"> <ul class="test2"> <li class="test3">Element</li> <li>Element</li> <li>Element</li> <li>Element</li> </ul> </div>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
ID - getElementById
document.getElementById("test1")
pending…
ID - querySelector
document.querySelector("#test1")
pending…
Class - getElementsByClassName
document.getElementsByClassName("test2")[0]
pending…
Class - querySelector
document.querySelector(".test2")
pending…
Grandchildren (tag) - chained
document.getElementById("test1").getElementsByTagName("li")
pending…
Grandchildren (tag) - querySelectorAll
document.querySelectorAll("#test1 li")
pending…
Grandchild (class) - chained
document.getElementById("test1").getElementsByClassName("test3")[0]
pending…
Grandchild (class) - querySelector
document.querySelector("#test1 .test3")
pending…
Classes - getElementsByClassName
document.getElementsByClassName("test2")
pending…
Classes - querySelectorAll
document.querySelectorAll(".test2")
pending…

Compare results of other browsers

Revisions

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

0 Comments