Run results for: classlist vs classname

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

Browser: Chrome 105

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
classlist	196937.5 Ops/sec
classname	472201.1 Ops/sec

HTML Preparation code:

<div id='s'></div>
<div id='s2'></div>

Tests:

classlist
let node = document.getElementById('s'), whitelist = ['add', 'remove', 'toggle']; function classlist(element, actions) { for (let i = 0, n = whitelist.length; i < n; i++) { let action = whitelist[i], classnames = actions[action], list = []; if (!classnames) { continue; } else if (!Array.isArray(classnames)) { classnames = [classnames]; } for (let j = 0, o = classnames.length; j < o; j++) { let classname = classnames[j], type = typeof classname; if (classname && (type === "string" || type === "number")) { list.push(classname); } } if (list) { element.classList[action](...list); } } } classlist(node, { add: ['foo', 'bar', 'baz', 'bam'], remove: ['bam'] });
classname
let node = document.getElementById('s2'); function classlist(classes, names) { let type = typeof names; if ((type === "string" || type === "number") && !classes.includes(names)) { classes.push(names); } else if (Array.isArray(names)) { for (let i = 0, n = names.length; i < n; i++) { classes = classlist(classes, names[i]); } } else if (type === 'object') { for (let key in names) { let value = names[key]; if (value) { if (value === 'toggle') { key = classes.includes(key) ? { [key]: false } : [key]; } classes = classlist(classes, key); } else { let index = classes.indexOf(key); if (index > -1) { classes.splice(index, 1); } } } } return classes; } node.className = classlist(node.className.split(' '), ["foo", ["bar", { baz: true, bam: false }]]).join(' ');