Dojo query vs jQuery selectors for class manipulation

Benchmark created by Ben McCormick on

Description

I want to compare performance on dom Queries between dojo queries, jQuery selectors and native implementations.

This is the third of several tests. I'm going to select a set of classes and add a class to each, then filter go to the parent of each and set an inline style on it.

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js"></script>

Setup

require(['dojo/query', 'dojo/dom', "dojo/NodeList-traverse"], function(query, dom) {
          dQuery = query;
          dDom = dom;
        });
    
    
    //Native code to define once 
    
    function addClass(node, className) {
      if (!node.length) node = [node];
      for (var n = 0, m = node.length; n < m; n++) {
        if ((" " + node[n].className + " ").indexOf(" " + className + " ") >= 0) {
          node.className += " " + className;
        }
      }
    }

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery class manipulation
$(".odd").addClass("evenMoreOdd").parent().css("color", "red");
ready
Dojo class manipulation
dQuery(".odd").addClass("evenMoreOdd").parent().style("color", "red");
ready
Native class manipulation (IE9 Compatible)
var elements = document.getElementsByClassName("odd");
var element;
for (element in elements) {
  addClass(element, "evenMoreOdd");
  parent = element.parentNode;
  if (parent) {
    parent.style.color = "red"
  }
}
ready
Native class manipulation (Non-IE9 compatible)
var elements = document.getElementsByClassName("odd");
//make it a proper Array (rather than an HTMLCollection)
elements = Array.prototype.slice.call(elements)

var parent;
elements.forEach(function(element){
  element.classList.add("evenMoreOdd");
  parent = element.parentNode;
  if (parent) {
    parent.style.color = "red"
  }
});
ready

Revisions

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