getElementsByClassName vs querySelectorAll with negation

Benchmark created by bobo on

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div class="page-content">
  <ul class="someclass">
    <li class="abc"><div class="item exclude">node 1</div></li>
    <li class="abc"><div class="item exclude">node 2</div></li>
    <li class="abc"><div class="item exclude">node 3</div></li>
    <li class="abc"><div class="item exclude">node 4</div></li>
    <li class="abc"><div class="item">node 5</div></li>
    <li class="abc"><div class="item exclude">node 6</div></li>
    <li class="abc"><div class="item exclude">node 7</div></li>
    <li class="abc"><div class="item exclude">node 8</div></li>
    <li class="abc"><div class="item exclude">node 9</div></li>
    <li class="abc"><div class="item">node 10</div></li>
  </ul>
</div>

Test runner

Ready to run.

Testing in
TestOps/sec
getElementsByClassName
var nodes = document.getElementsByClassName('item');
var arr = [];
for (var i = 0, max = nodes.length; i < max; i++) {
  if(!nodes[i].classList.contains('exclude')) arr.push(nodes[i]);
}
ready
querySelectorAll
var nodes = document.querySelectorAll('.item:not(.exclude)');
var arr = nodes;
ready
jQuery
var nodes = $('.item:not(.exclude)');
var arr = nodes;
ready

Revisions

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