classList.contains() в JavaScript

Метод classList.contains() проверяет, есть ли у DOM-элемента указанный CSS-класс. Он возвращает true или false.

• Проверка класса
• Использование результата
• Итого

Проверка класса

<button class="menu-button is-open">Меню</button>

const menuButton = document.querySelector('.menu-button');

console.log(menuButton.classList.contains('is-open')); // true
console.log(menuButton.classList.contains('is-disabled')); // false

Первый вызов вернёт true, потому что у кнопки есть класс is-open. Второй вернёт false. Синтаксис метода: element.classList.contains(‘имя-класса’).

В classList.contains() передают имя класса без точки: menuButton.classList.contains(‘is-open’), а не menuButton.classList.contains(‘.is-open’). Имя должно совпадать полностью: проверка contains(‘open’) вернёт false, если у элемента есть только класс is-open.

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

Результат проверки удобно использовать в условии. Например, текст кнопки зависит от того, есть ли у неё класс is-open.

if (menuButton.classList.contains('is-open')) {
  menuButton.textContent = 'Закрыть меню';
} else {
  menuButton.textContent = 'Открыть меню';
}

В этом примере метод только проверяет класс. Он не добавляет и не удаляет его - меняется лишь текст кнопки в зависимости от текущего состояния.

Итого

classList.contains() возвращает true, если у элемента есть указанный класс, и false, если его нет. Метод полезен, когда действие зависит от текущего состояния элемента.