Run results for: querySelector() vs getElementsByTagName()[0]

Run details:

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

Browser: Chrome 137

Operating system: Linux

Device Platform: Desktop

Date tested: 10 months ago

Test name	Executions per second
querySelector	15289845.0 Ops/sec
getElementsByTagName()[0]	11123142.0 Ops/sec

HTML Preparation code:

<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

Script Preparation code:

const div = document.getElementsByTagName('div')[0];

Tests:

querySelector
const span = div.querySelector('span');
getElementsByTagName()[0]
const span = div.getElementsByTagName('span')[0];