Benchmark: querySelector() vs getElementsByTagName()[0]

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];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelector
getElementsByTagName()[0]

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 10 months ago)

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

Browser/OS: Chrome 137 on Linux

View result in a separate tab

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

Related benchmarks:

querySelectorAll vs getElementsByTagName 2
querySelectorAll vs getElementsByTagName 2z
Get elements by tag and class, vs. only tag, vs. only class
querySelector vs getElementsByTagName check presence
querySelectorAll vs getElementsByTagName iteration2
querySelectorAll vs getElementsByTagName iteration 22
querySelectorAll vs getElementsByTagName iteration v2
document getElementsByTagName vs querySelectorAll
querySelector() vs getElementsByTagName()[0] prerun

querySelector() vs getElementsByTagName()[0] (version: 1)

Comparing performance of: querySelector vs getElementsByTagName()[0]

Created: one year ago by: Guest

Jump to the latest result

querySelector

getElementsByTagName()[0]

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A