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 years ago

getElementById

7.8M/s

querySelector

3.7M/s

View exact numbers

Test name	Executions per second
✓ getElementById	7,844,322 Ops/sec
querySelector	3,684,098 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;