getElementById vs. querySelector vs getElement(s)ByClassName vs scoping (v163)

Revision 163 of this benchmark created by Nk_bet on

Description

Compare the speed of getElementById to querySelector to getElementsByClassName

Preparation HTML

<div id="main">
   <p class="bar" id="foo">Foo</p>
   <p class="bar" id="bar">Bar</p>
   <p class="bar" id="baz">Baz</p>
</div<

Test runner

Ready to run.

Testing in
TestOps/sec
getElementById
var bar = document.getElementById("bar");
ready
getElementsByClassName (first element)
var bar = document.getElementsByClassName("bar")[0];
ready
querySelector
var bar = document.querySelector("#bar");
ready
getElementsByClassName (last element)
var bar = document.getElementsByClassName("bar")[2];
ready
getElementById.querySelector
var bar = document.getElementById("main").querySelector("#bar");
ready
getElementById.getElementsByClassName (first element)
var bar = document.getElementById("main").getElementsByClassName("bar")[0];
ready
getElementById.getElementsByClassName (last element)
var bar = document.getElementById("main").getElementsByClassName("bar")[2];
ready

Revisions

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