Run results for: querySelector vs. getElementsByClassName[0]

Run details:

User agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:74.0) Gecko/20100101 Firefox/74.0

Browser: Firefox 74

Operating system: Windows 7

Device Platform: Desktop

Date tested: 4 years ago

Test name	Executions per second
querySelector	2324988.8 Ops/sec
getElementsByClassName	2317692.8 Ops/sec

HTML Preparation code:

<div>
  <ul>
    <li>
      <a href="#" name="name" class="classname">item 1</a>
    </li>
    <li>
      <a href="#" name="name" class="classname">item 2</a>
    </li>
    <li>
      <a href="#" name="name" class="classname">item 3</a>
    </li>
    <li>
      <a href="#" name="name" class="classname">item 4</a>
    </li>
    <li>
      <a href="#" name="name" class="classname">item 5</a>
    </li>
    <li>
      <a href="#" name="name" class="classname">item 6</a>
    </li>
    <li>
      <a href="#" name="name" class="classname">item 7</a>
    </li>
    <li>
      <a href="#" name="name" class="classname">item 8</a>
    </li>
    <li>
      <a href="#" name="name" class="classname">item 9</a>
    </li>
    <li>
      <a href="#" name="name" class="classname">item 10</a>
    </li>
  </ul>
</div>

Tests:

querySelector
document.querySelector('.classname')
getElementsByClassName
document.getElementsByClassName('classname')[0]