getElementsByTagName VS querySelectorAll (v5)

Revision 5 of this benchmark created on

Preparation HTML

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

<script>
  var nodes;
</script>

Setup

var tagNameNodes = document.getElementsByTagName('a');
    var queryNodes = document.querySelectorAll('a');

Test runner

Ready to run.

Testing in
TestOps/sec
getElementsByTagName iteration
for (var i = 0; i < tagNameNodes.length; i++) {
    tagNameNodes[i].href = "#";
    tagNameNodes[i].title = "click me";
}
ready
querySelectorAll iteration
for (var i = 0; i < queryNodes.length; i++) {
    queryNodes[i].href = "#";
    queryNodes[i].title = "click me";
}
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.