getElementsByClassName VS querySelectorAll (v39)

Revision 39 of this benchmark created by Jon-Carlos Rivera on

Preparation HTML

<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>
<script>
  var nodes;
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
getElementsByClassName
nodes = document.getElementsByClassName('classname');
var l = nodes.length;
var t = "";

while(l-->1) t += nodes[l].parentNode.previousSibling.innerHTML;
ready
querySelectorAll
nodes = document.querySelectorAll('.classname');
var l = nodes.length;
var t = "";

while(l-->1) t += nodes[l].parentNode.previousSibling.innerHTML;
ready

Revisions

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