Как проверить наличие класса у элемента в JavaScript

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

Чтобы проверить наличие класса у элемента при помощи JavaScript, воспользуйтесь методом classList.contains:

if (element.classList.contains('my-class')) {
  // 🎉 Класс присутствует, можно отметить это!
}

Поддержка старых браузеров: Привет, старым друзьям!

Если в работе необходимо использовать старые браузеры, которые не поддерживают classList, то можно прибегнуть к альтернативным решениям. Например, написать функцию-помощник, используя свойство className и метод indexOf:

function hasClass(element, className) {
  return (' ' + element.className + ' ').indexOf(' ' + className + ' ') > -1;
}

if (hasClass(element, 'beloved-old-class')) {
  // 🦖 Отлично, нам удалось обнаружить следы динозавров!
}

Такой подход обеспечивает максимальную совместимость с различными версиями браузеров.

Проверка нескольких классов: Чем больше, тем веселее!

Если задача стоит в проверке наличия нескольких классов, отлично подойдет применение цикла for в сочетании с методом classList.contains:

var classesToCheck = ['class1', 'class2', 'class3'];
for (var i = 0; i < classesToCheck.length; i++) {
  if (element.classList.contains(classesToCheck[i])) {
    // 👑 Найден хотя бы один класс! Пора наслаждаться своим статусом короля классов!
    break;
  }
}

Простота подхода и эффективность работы оставят вас довольными.

Сложные селекторы: Раскройте мощь matches

Для проверки соответствия элемента селекторам, включая классы, пригодится метод Element.matches():

if (element.matches('.fancy-class')) {
  // 💃 Элемент и класс '.fancy-class' теперь как будто пара!
}

В этом методе кроется ваш секретный инструмент для работы со сложными селекторами, когда у элемента имеется несколько классов.

Измерение производительности: Необходимость в скорости

Герои фильмов о гонках скажут: "Не важно, на сколько ты победил, главное — выигрыш". Но в мире кода каждая милисекунда имеет значение. Сравните classList.contains и indexOf:

• Тест на пределе: https://jsben.ch/U3CpX
• График победы: https://i.stack.imgur.com/8kWMd.png

Помните: даже скорость Молнии Маккуина отличается от трассы к трассе.

Полифилы: Ностальгия по classList

Чтобы поддерживать старые браузеры, полифил может добавить им возможности classList, современные к нашему времени:

// Возвращаемся в будущее с помощью classList
if (!("classList" in document.createElement("_"))) {
  Object.defineProperty(HTMLElement.prototype, 'classList', {
    // Ваш код будет здесь...
  });
}

Изучите подробности — полифил classList.js от Eli Grey, чтобы получить полное понимание.

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

Попробуем изобразить, как element содержит класс в JavaScript, представив шкаф с лучшими нарядами:

const outfitExists = element.classList.contains('stylish-outfit');

Ищем "Стильный костюм":

👗 Есть (✅): На вас шикарный наряд! 🚫 Нет (❌): Пора обновить гардероб!

Никаких ложных срабатываний

Используя classList.contains, мы минимизируем риск ложных срабатываний, которые могут возникнуть при использовании indexOf. Не путайте классы .btn и .btn-large — они отличаются так же, как и нюансы вашего кода!

Особый подход к SVG

Для работы с SVG элементами classList станет надежным помощником. В случае SVG свойство className может работать не так, как ожидали, особенно в старых браузерах.

Работа с классами в популярных фреймворках

Пользователям React, Angular и Vue стоит отметить, что эти фреймворки предлагают свои собственные решения для работы с классами. Их встроенные подходы лучше совместимы с реализацией виртуального DOM, поэтому рекомендуется использовать именно их.

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

1. Свойство Element: classList – Web API | MDN
2. Проверка наличия класса у элемента – Stack Overflow
3. Основы синтаксиса классов – JavaScript.info
4. Метод DOMTokenList: contains() – Web API | MDN
5. Классовый API HTML5 – David Walsh Blog
6. Метод .hasClass() | jQuery API Документация ---