Question

I’m iterating over a large number of dom elements in Javascript, and I’d like to add/remove classes as appropriate.

What’s the most efficient add/remove class operation I can use?

Answer 1

• Small class strings: JSPerf.
• Bigger class strings: JSPerf.
• Bigger class strings, repeated class names: JSPerf.

Remove

The fastest reliable way (small/medium size):

var clss = 'classToRemove';
elem.className = (' '+elem.className+' ').split(' ' + clss + ' ').join(' ');

If you know for sure that the string does not contain multiple occurrences of the same class name, you can better use the string.replace method (any size):

var clss = 'classToRemove';
elem.className = (' '+elem.className+' ').replace(' ' + clss + ' ', ' ');

The other alternatives:

• Using a RegExp in combination with replace – Slow in all cases
• Using indexOf to find the position, and use string concatenation (substring) to remove the class (repeat this in a loop to remove all possible duplicates).
  Slowest for large strings with repetition, not slow neither fast in other cases.

Add (without doubt):

var clss = 'classToAdd';
element.className += ' ' + clss;