Get Elements by Attribute

Benchmark created by Steve on December 27, 2013

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div>
     <div data-foo="yes">1</div>
     <div data-foo="yes">2</div>
     <div data-foo="no">3</div>
     <div data-foo="yes">4</div>
     <div data-foo="yes">5</div>
</div>

Setup

document.getElementsByAttribute = Element.prototype.getElementsByAttribute = function(attr) {
      var nodeList = this.getElementsByTagName("*");
      var nodeArray = [];
    
      for (var i = 0, node; node = nodeList[i]; i++) {
        if (node.getAttribute(attr)) {
          nodeArray.push(node);
        }
      }
    
      return nodeArray;
    }

Test runner

for (var i = 0; i < 10000; i++) {
  document.querySelectorAll("data-foo");
}

for (var i = 0; i < 10000; i++) {
  $("data-foo");
}

for (var i = 0; i < 10000; i++) {
  document.getElementsByAttribute("data-foo");
}

Revisions

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

• Revision 1: published by Steve on December 27, 2013