Run results for: queryselector vs getelementbyid with classes and ids

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Browser: Chrome 126

Operating system: Linux

Device Platform: Desktop

Date tested: 2 months ago

Test name	Executions per second
querySelector	3684098.0 Ops/sec
getElementById	7844323.0 Ops/sec

HTML Preparation code:

<div class="container">
  <div class="header"></div>
    <div class="content">
    <div class="title"></div>
    <div class="text">
    	<div id="testElement"></div>
    </div>
  </div>
  <div class="footer"></div>
</div>

Tests:

querySelector
var el = document.querySelector('#testElement'); var className = el.className;
getElementById
var el = document.getElementById('testElement'); var className = el.className;

Run results for: queryselector vs getelementbyid with classes and ids

querySelector

getElementById