MeasureThat.net

Run results for: getElementById and getElementsByClassName [0] vs querySelector

Test performance of different ways of get just one particular DOM element

Go to the benchmark
Run details:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36 OPR/109.0.0.0
Opera 109
Windows
Desktop
one year ago
Test name Executions per second
getElementById 4348930.0 Ops/sec
querySelector 1997115.4 Ops/sec
getElementById and getElementsByClassName 2193855.2 Ops/sec
HTML Preparation code:
AخA
 
1
<div id="testdiv">
2
  <div id="unique1" class="unique" name="unique" data-unique="1">test1</div>
3
  <div id="unique2" class="unique" name="unique" data-unique="2">test2</div>
4
  <div id="unique3" class="unique" name="unique" data-unique="3">test3</div>
5
  <div id="unique4" class="unique" name="unique" data-unique="4">test4</div>
6
  <div id="unique5" class="unique" name="unique" data-unique="5">test5</div>
7
</div>
Script Preparation code:
 
var i, imax;
var doc = document;
Tests:

  • getElementById

     
    var test = doc.getElementById('testdiv').childNodes[0].innerHTML;

  • querySelector

     
    var test = doc.querySelector('#testdiv .unique').innerHTML;

  • getElementById and getElementsByClassName

     
    var test = doc.getElementById('testdiv').getElementsByClassName('unique')[0].innerHTML;