Run results for: Different types of selecting

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:55.0) Gecko/20100101 Firefox/55.0

Browser: Firefox 55

Operating system: Windows

Device Platform: Other

Date tested: 7 years ago

Test name	Executions per second
getElementById	243756.5 Ops/sec
querySelector("#id")	242995.6 Ops/sec
getElementsByClassName("class")[0]	246664.2 Ops/sec
querySelector(".class")	120902.0 Ops/sec
getElementById + getElementsByTagName	63712.1 Ops/sec
querySelectorAll("#id tag")	27512.3 Ops/sec
getElementById + getElementsByClassName[0]	224777.4 Ops/sec
querySelector("#id .class")	119497.3 Ops/sec
getElementsByClassName("class")	64787.0 Ops/sec
querySelectorAll(".class")	25767.8 Ops/sec

HTML Preparation code:

<div>
  <ul id="id1">
    <li class="c1">Element</li>
    <li id="id2" class="c1">Element</li>
    <li class="c1">Element</li>
    <li class="c1">Element</li>
  </ul>
</div>

Tests:

getElementById
document.getElementById("id2").innerHTML = "ciao"
querySelector("#id")
document.querySelector("#id2").innerHTML = "ciao"
getElementsByClassName("class")[0]
document.getElementsByClassName("c1")[0].innerHTML = "ciao"
querySelector(".class")
document.querySelector(".c1").innerHTML = "ciao"
getElementById + getElementsByTagName
var all = document.getElementById("id1").getElementsByTagName("li"); for (var i=0; i<all.length; i++) { all[i].innerHTML = "ciao"; }
querySelectorAll("#id tag")
var all = document.querySelectorAll("#id1 li"); for (var i=0; i<all.length; i++) { all[i].innerHTML = "ciao"; }
getElementById + getElementsByClassName[0]
document.getElementById("id1").getElementsByClassName("c1")[0].innerHTML = "ciao"
querySelector("#id .class")
document.querySelector("#id1 .c1").innerHTML = "ciao"
getElementsByClassName("class")
var all = document.getElementsByClassName("c1"); for (var i=0; i<all.length; i++) { all[i].innerHTML = "ciao"; }
querySelectorAll(".class")
var all = document.querySelectorAll(".c1"); for (var i=0; i<all.length; i++) { all[i].innerHTML = "ciao"; }

Run results for: Different types of selecting

getElementById

querySelector("#id")

getElementsByClassName("class")[0]

querySelector(".class")

getElementById + getElementsByTagName

querySelectorAll("#id tag")

getElementById + getElementsByClassName[0]

querySelector("#id .class")

getElementsByClassName("class")

querySelectorAll(".class")