jQuery addClass vs dom classList (v7)

Revision 7 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script src="http://zeptojs.com/zepto.min.js"></script>
<div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div><div class="testDiv">hi</div>
  <style>
    .class1{ color: red }
  </style>

Setup

// addClass (classList detection with jQuery fallback)
    var supportClassList = typeof document.documentElement.classList !== 'undefined';
    
    function addClassF(search, addArray)
    {
        var theList = document.getElementsByClassName(search)
    
    for(var i=0;i<theList.length;i++){
    for(var j=0;j<addArray.length;j++)theList[i].classList.add(addArray[j]);
    }
    }

Test runner

Ready to run.

Testing in
TestOps/sec
jquery addClass
$(".testDiv").addClass("class1 class2");
ready
DOM classList with jQuery selector
(function() {
   //var e = document.getElementById("testDiv");
$('.testDiv').each(function(){
   this.classList.add("class1");
   this.classList.add("class2");
});
})();
ready
DOM classList pure JS
(function() {
   var e = document.getElementsByClassName("testDiv");

for(var i=0; i<e.length; i++){
e[i].classList.add('class1');
e[i].classList.add('class2');
}

})();
ready
DOM classList wrapper
(function(){
addClassF('testDiv',['class1','class2']);
})();
ready
array check
document.getElementsByClassName('testDiv')[4];
ready
node check
document.getElementsByClassName('testDiv').item(4)
ready

Revisions

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