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

The classList property returns the class names of an element as a DOMTokenList object. While it's read-only, you can modify it using methods like add() and remove().

The classList property automatically prevents duplicate classes from being added. You can add or remove multiple classes in a single instruction using several approaches.

Using Multiple Parameters (ES6+)

Modern browsers support passing multiple class names as separate parameters:

<div id="myDiv" class="container">Content</div>

<script>
const element = document.getElementById('myDiv');

// Add multiple classes
element.classList.add('active', 'highlighted', 'primary');
console.log(element.className);

// Remove multiple classes
element.classList.remove('active', 'highlighted');
console.log(element.className);
</script>

container active highlighted primary
container primary

Using Spread Operator with Arrays

You can use the spread operator to add/remove classes from an array:

<div id="demo" class="base">Demo Element</div>

<script>
const element = document.getElementById('demo');
const classesToAdd = ['class1', 'class2', 'class3'];
const classesToRemove = ['base', 'class1'];

// Add multiple classes from array
element.classList.add(...classesToAdd);
console.log(element.className);

// Remove multiple classes from array  
element.classList.remove(...classesToRemove);
console.log(element.className);
</script>

base class1 class2 class3
class2 class3

Custom Helper Functions

For older browsers or additional functionality, you can extend DOMTokenList:

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

<script>
// Extend DOMTokenList prototype
DOMTokenList.prototype.addMany = function(classes) {
    const arr = classes.split(' ');
    for (let i = 0; i < arr.length; i++) {
        this.add(arr[i]);
    }
};

DOMTokenList.prototype.removeMany = function(classes) {
    const arr = classes.split(' ');
    for (let i = 0; i < arr.length; i++) {
        this.remove(arr[i]);
    }
};

const element = document.getElementById('testElement');

// Use custom methods
element.classList.addMany('new active highlighted');
console.log(element.className);

element.classList.removeMany('original new');
console.log(element.className);
</script>

original new active highlighted
active highlighted

Comparison of Methods

Conclusion

Modern browsers support adding multiple classes directly with classList.add('class1', 'class2'). For dynamic arrays, use the spread operator classList.add(...array).