Run results for: 3 Ways to Iterate a JavaScript Collection v.1.0.1

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.55 Safari/537.36

Browser: Chrome 96

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 3 years ago

Test name	Executions per second
querySelectorAll	258588.2 Ops/sec
Array.prototype	277511.2 Ops/sec
getElementsByClassName + getElementsByTagName	277962.0 Ops/sec
getElementsByClassName + querySelector	277988.4 Ops/sec

HTML Preparation code:

<ul>
  <li class="nolink">
    <a href="#" rel="next">A link with class .nolink</a>
  </li>
  <li class="nolink">
    <a href="#" rel="next">Another link with class .nolink</a></li>
  <li>
    <a href="#" rel="next">A link with no classes</a></li>
</ul>

Tests:

querySelectorAll
document .querySelectorAll('.nolink a') .forEach(noLink => { noLink.setAttribute('role', 'link'); noLink.setAttribute('aria-disabled', 'true'); noLink.removeAttribute('href'); noLink.removeAttribute('rel'); });
Array.prototype
const noLinks = document.getElementsByClassName('nolink'); Array.prototype.forEach.call(noLinks, function(noLink) { const matches = noLink.getElementsByTagName('a')[0]; matches.setAttribute('role', 'link'); matches.setAttribute('aria-disabled', 'true'); matches.removeAttribute('href'); matches.removeAttribute('rel'); });
getElementsByClassName + getElementsByTagName
const noLinks = document.getElementsByClassName('nolink'); for (let noLink of noLinks) { const matches = noLink.getElementsByTagName('a')[0]; matches.setAttribute('role', 'link'); matches.setAttribute('aria-disabled', 'true'); matches.removeAttribute('href'); matches.removeAttribute('rel'); };
getElementsByClassName + querySelector
const noLinks = document.getElementsByClassName('nolink'); for (let noLink of noLinks) { const matches = noLink.querySelector('a') matches.setAttribute('role', 'link'); matches.setAttribute('aria-disabled', 'true'); matches.removeAttribute('href'); matches.removeAttribute('rel'); };

Run results for: 3 Ways to Iterate a JavaScript Collection v.1.0.1

querySelectorAll

Array.prototype

getElementsByClassName + getElementsByTagName

getElementsByClassName + querySelector