Run results for: queryselector vs getelementbyid with classes and ids

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:139.0) Gecko/20100101 Firefox/139.0

Browser: Firefox 139

Operating system: Mac OS X 10.15

Device Platform: Desktop

Date tested: one year ago

getElementById

8.6M/s

querySelector

6.3M/s

View exact numbers

Test name	Executions per second
✓ getElementById	8,550,460 Ops/sec
querySelector	6,337,272 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;