Run results for: addClass/removeClass

Run details:

User agent: Mozilla/5.0 (Windows NT 5.1; rv:52.0) Gecko/20100101 Firefox/52.0

Browser: Firefox 52

Operating system: Windows XP

Device Platform: Other

Date tested: 7 years ago

Test name	Executions per second
classList.add/classList.remove (1 class)	34717.1 Ops/sec
function addClass/function removeClass (1 class)	13340.4 Ops/sec
jQuery (1 class)	10437.3 Ops/sec
classList.add/classList.remove (2 class)	22230.7 Ops/sec
function addClass/function removeClass (2 class)	12194.2 Ops/sec
jQuery (2 class)	8347.8 Ops/sec

HTML Preparation code:

<div id="testElement">Test</div>

Script Preparation code:

var API = API || {};
API.classReg=function(className){return new RegExp("(^|\\s+)"+className+"(\\s+|$)");};

if('classList' in document.documentElement){
	API.hasClass=function(elem,c){return elem.classList.contains(c);};
  	API.addClass=function(elem,c){
		var cArr=c.match(/[a-z][a-z0-9_-]*/gi);
		elem.classList.add.apply(elem.classList, cArr);
    };
    API.removeClass=function(elem,c){
		var cArr=c.match(/[a-z][a-z0-9_-]*/gi);
		elem.classList.remove.apply(elem.classList, cArr);
    };
}else{
	API.hasClass=function(elem,c){return API.classReg(c).test(elem.className);};
  	API.addClass=function(elem,c){
		var cList=c.split(/\s+/);
		if(!API.hasClass(elem,cList[0])){
			if(elem.className != '') cList[0]=' '+cList[0];
			elem.className=elem.className+cList[0];
		}
		if(cList.length > 1) API.addClass(elem,cList.slice(1).join(' '));
    };
    API.removeClass=function(elem,c){
		var cList=c.split(/\s+/);
		if(API.hasClass(elem,cList[0])) elem.className=elem.className.replace(API.classReg(cList[0]),' ');
		if(cList.length > 1) API.removeClass(elem,cList.slice(1).join(' '));
    };
}

var elem = document.getElementById('testElement');

Tests:

classList.add/classList.remove (1 class)
elem.classList.add('classtest'); elem.classList.remove('classtest');
function addClass/function removeClass (1 class)
API.addClass(elem,'classtest'); API.removeClass(elem,'classtest');
jQuery (1 class)
$('#testElement').addClass('classtest'); $('#testElement').removeClass('classtest');
classList.add/classList.remove (2 class)
elem.classList.add('classtest','twoclass'); elem.classList.remove('classtest','twoclass');
function addClass/function removeClass (2 class)
API.addClass(elem,'classtest twoclass'); API.removeClass(elem,'classtest twoclass');
jQuery (2 class)
$('#testElement').addClass('classtest twoclass'); $('#testElement').removeClass('classtest twoclass');

Run results for: addClass/removeClass

classList.add/classList.remove vs function addClass/function removeClass vs jQuery (one and multi class)

classList.add/classList.remove (1 class)

function addClass/function removeClass (1 class)

jQuery (1 class)

classList.add/classList.remove (2 class)

function addClass/function removeClass (2 class)

jQuery (2 class)