Добавление и удаление нескольких классов через classList

Быстрый ответ

Такое действительно возможно! Для этого пригодятся методы classList.add() и classList.remove(), позволяющие добавить или удалить сразу несколько классов:

element.classList.add('class1', 'class2');    // Таким образом, 'class1' и 'class2' были добавлены
element.classList.remove('class1', 'class2'); // А здесь 'class1' и 'class2' были удалены

Итак, приготовьтесь к небольшому уроку! Как насчет того, чтобы узнать, как управлять динамическими наборами классов? Переходим к следующему блоку!

Работа с динамическими списками классов

Использование оператора расширения

Уже знакомы с оператором расширения (...)? Его задача — раскрывать итерируемые объекты, такие как массивы или строки, превращая их элементы в отдельные значения:

const classesToAdd = ['class1', 'class2', 'class3'];
element.classList.add(...classesToAdd); // Теперь все классы из массива добавлены

Когда необходимо освободить место, этот оператор с легкостью удаляет классы:

const classesToRemove = ['class1', 'class2', 'class3'];
element.classList.remove(...classesToRemove); // Все классы удалены, как будто их и не было

Подробнее об этом расскажет наш спикер на видео

Использование метода apply

Если вы тяготеете к классическим подходам и предпочитаете методы, проверенные временем, метод apply придется вам по вкусу:

element.classList.add.apply(element.classList, classesToAdd); // Вид ухитрения несколько сложный, но решение эффективное!
element.classList.remove.apply(element.classList, classesToRemove); // Прощайте, классы! Путь вам перекрыт!

Настройка classList: по своим правилам

Добавление методов прототипа

Если стандартные методы classList не соответствуют вашим требованиям, вы сможете улучшить его, добавив собственные методы addMany или removeMany. Индивидуальный подход? Помалу!

DOMTokenList.prototype.addMany = function(...classes) {
    classes.forEach(singleClass => {
        if (!this.contains(singleClass)) {
            this.add(singleClass); // Это как контроль при входе в клуб: "Не в списке? Пожалуйста, проходите!"
        }
    });
};

DOMTokenList.prototype.removeMany = function(...classes) {
    classes.forEach(singleClass => {
        this.remove(singleClass); // Чистка списка: "class1, class2, class3 – ваш час пробил!"
    });
};

Предотвращение конфликтов имен

Будьте осторожны при создании методов прототипа. Ведь очень важно избегать возможного пересечения с уже существующими методами или теми, которые могут быть добавлены в будущем:

if (!('addMany' in DOMTokenList.prototype)) {
    // Если метод addMany отсутствует, мы его добавим. Раз у нас есть план, то мы его воплотим.
}

if (!('removeMany' in DOMTokenList.prototype)) {
    // Мы добавляем removeMany. Ведь то, что прибавляется и то, что исчезает по просьбе, всегда хорошо.
}

Визуализация

Давайте представим процесс изменения classList как управление гардеробом. Это примерно так же просто, как...

Гардероб до: |👔👖👗🧣|

Добавим несколько новых вещей одновременно:

wardrobe.classList.add('👕', '👚', '🧢');  // И вуаля! Гардероб заполнен!

Гардероб после:  |👔👖👗🧣👕👚🧢|

Уберем сразу несколько вещей:

wardrobe.classList.remove('👖', '🧣'); // Сегодня пятница, джинсы и шарфы нам не нужны!

Гардероб после:  |👔👗👕👚🧢|

Смена стиля гардероба теперь проще простого!

Эффективность и совместимость

classList обладает высокой производительностью и отлично совместим с современными браузерами. Использовать его для управления множеством классов не просто удобно, но и практично: это предотвращает ошибки и облегчает задачу по обеспечению кросс-браузерной совместимости, в отличие от менее эффективного управления каждым классом отдельно.

Полезные материалы

1. Элемент: свойство classList – Веб API | MDN — Полное руководство по classList на MDN Web Docs.
2. Свойство classList объекта Element — Инструкция по работе с classList от W3Schools.
3. API classList() | CSS-Tricks – Подробное описание возможностей classList от CSS-Tricks.
4. Can I use... Support tables for HTML5, CSS3, etc — Удобный ресурс для проверки поддержки classList в браузерах.