Benchmark: querySelectorAll + forEach vs. getElementsByClassName + for

HTML Preparation code:

<div>
  <ul>
    <li><a href="#" name="name1" class="classname">item 1</a></li>
    <li><a href="#" name="name2" class="classname">item 2</a></li>
    <li><a href="#" name="name3" class="classname">item 3</a></li>
    <li><a href="#" name="name4" class="classname">item 4</a></li>
    <li><a href="#" name="name5" class="classname">item 5</a></li>
    <li><a href="#" name="name6" class="classname">item 6</a></li>
    <li><a href="#" name="name7" class="classname">item 7</a></li>
    <li><a href="#" name="name8" class="classname">item 8</a></li>
    <li><a href="#" name="name9" class="classname">item 9</a></li>
    <li><a href="#" name="name0" class="classname">item 10</a></li>
    <li><a href="#" name="name11" class="classname">item 11</a></li>
    <li><a href="#" name="name12" class="classname">item 12</a></li>
    <li><a href="#" name="name13" class="classname">item 13</a></li>
    <li><a href="#" name="name14" class="classname">item 14</a></li>
    <li><a href="#" name="name15" class="classname">item 15</a></li>
    <li><a href="#" name="name16" class="classname">item 16</a></li>
    <li><a href="#" name="name17" class="classname">item 17</a></li>
    <li><a href="#" name="name18" class="classname">item 18</a></li>
    <li><a href="#" name="name19" class="classname">item 19</a></li>
    <li><a href="#" name="name10" class="classname">item 20</a></li>
    <li><a href="#" name="name21" class="classname">item 21</a></li>
    <li><a href="#" name="name22" class="classname">item 22</a></li>
    <li><a href="#" name="name23" class="classname">item 23</a></li>
    <li><a href="#" name="name24" class="classname">item 24</a></li>
    <li><a href="#" name="name25" class="classname">item 25</a></li>
    <li><a href="#" name="name26" class="classname">item 26</a></li>
    <li><a href="#" name="name27" class="classname">item 27</a></li>
    <li><a href="#" name="name28" class="classname">item 28</a></li>
    <li><a href="#" name="name29" class="classname">item 29</a></li>
    <li><a href="#" name="name20" class="classname">item 30</a></li>
    <li><a href="#" name="name31" class="classname">item 31</a></li>
    <li><a href="#" name="name32" class="classname">item 32</a></li>
    <li><a href="#" name="name33" class="classname">item 33</a></li>
    <li><a href="#" name="name34" class="classname">item 34</a></li>
    <li><a href="#" name="name35" class="classname">item 35</a></li>
    <li><a href="#" name="name36" class="classname">item 36</a></li>
    <li><a href="#" name="name37" class="classname">item 37</a></li>
    <li><a href="#" name="name38" class="classname">item 38</a></li>
    <li><a href="#" name="name39" class="classname">item 39</a></li>
    <li><a href="#" name="name30" class="classname">item 40</a></li>
  </ul>
</div>

Tests:

querySelectorAll + forEach
document.querySelectorAll(".classname").forEach((niceElement) => { // something });
getElementsByClassName + for
var nodes = document.getElementsByClassName("class"); for(var i = 0; i < nodes.length; i++) { // something }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelectorAll + forEach
getElementsByClassName + for

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

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

Browser/OS: Firefox 152 on Windows

View result in a separate tab

getElementsByClassName + for

8.4M/s

querySelectorAll + forEach

556K/s

View exact numbers

Test name	Executions per second
✓ getElementsByClassName + for	8,366,272 Ops/sec
querySelectorAll + forEach	556,355 Ops/sec

querySelectorAll + forEach vs. getElementsByClassName + for (version: 1)

querySelectorAll + forEach vs. getElementsByClassName + for

Comparing performance of: `querySelectorAll + forEach vs getElementsByClassName + for`

Created: one month ago by: Guest

Go to the latest result

querySelectorAll + forEach

getElementsByClassName + for

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

querySelectorAll + forEach vs. getElementsByClassName + for (version: 1)

querySelectorAll + forEach vs. getElementsByClassName + for

Comparing performance of: querySelectorAll + forEach vs getElementsByClassName + for

Created: one month ago by: Guest

Go to the latest result

querySelectorAll + forEach

getElementsByClassName + for

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Related benchmarks

Comparing performance of: `querySelectorAll + forEach vs getElementsByClassName + for`