Is there a way to add/remove several classes in one single instruction with classList?

Dealing with dynamic class lists

Using the spread operator

Ever seen the spread operator (...) in action? Like a master sushi chef, it unrolls iterables like arrays or strings and serves up their elements on a silver platter:

const classesToAdd = ['class1', 'class2', 'class3'];
element.classList.add(...classesToAdd); // Bon appétit! Adds all classes from the array


And when you need to make room on your plate, it delicately removes classes using the same ease:

const classesToRemove = ['class1', 'class2', 'class3'];
element.classList.remove(...classesToRemove); // Leaves not a crumb! Removes all classes


Using the apply method

If you're an old-school JavaScript guru who prefers the traditional approach, the apply method is your buddy:

element.classList.add.apply(element.classList, classesToAdd); // Sure, it's verbose, but it gets the job done!
element.classList.remove.apply(element.classList, classesToRemove); // It's like a bouncer - the class names don't stand a chance!


Customizing classList: your way or the highway

Adding prototype methods

When classList just doesn't cut the mustard, you can breathe new life into it with your very own methods like addMany or removeMany. Got custom methods? You bet!

DOMTokenList.prototype.addMany = function(...classes) {
    if (!this.addMany) {
        classes.forEach(singleClass => {
            if (!this.contains(singleClass)) {
                this.add(singleClass); // It's like a bouncer checking IDs: "You're not on the list? You're in!"
            }
        });
    }
};

DOMTokenList.prototype.removeMany = function(...classes) {
    if (!this.removeMany) {
        classes.forEach(singleClass => {
            this.remove(singleClass); // It's like a hitlist: "class1, class2, class3... your time has come!"
        });
    }
};


Avoiding naming conflicts

When creating prototype methods, it call for discretion. You wouldn't want them to trip over existing methods or names reserved for future use:

if (!('addMany' in DOMTokenList.prototype)) {
    // Add addMany method if it doesn't exist. Because, thing doesn't exist until you create them.
}

if (!('removeMany' in DOMTokenList.prototype)) {
    // Add removeMany, because if adding is good, removing is even better.
}


Efficiency and compatibility

classList offers efficiency and wide compatibility across modern browsers. Using it for multiple classes isn't just cool, it's smart: it helps avoid errors and reduces compatibility concerns compared to manipulating classes one-by-one.