Проверка наличия класса у элемента: JavaScript без jQuery

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

Для проверки присутствия определённого класса у DOM-элемента в JavaScript обычно используется следующий код:

element.classList.contains('class-name') // Возвращает true или false

Свойство classList DOM-элемента предоставляет метод contains, который проверяет наличие указанного класса и выдаёт булево значение.

О разборе свойства classList

Свойство classList представляет собой набор методов для управления классами элемента. В числе этих методов не только contains, но и add, remove и toggle, которые значительно упрощают работу с DOM.

Добавление и удаление классов

Добавление класса к элементу выглядит следующим образом:

element.classList.add('new-class'); // Добавляем класс "new-class"

Чтобы удалить класс, используется вот такой код:

element.classList.remove('old-class'); // Удаляем класс "old-class"

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

Переключение класса

Переключатель класса полезен для динамически изменяемых компонентов, например, кнопок:

element.classList.toggle('active'); // Класс "active" то появляется, то исчезает

Учет старых версий браузеров

В старых версиях браузеров, где функциональность classList не поддерживается, поможет использование регулярного выражения:

function hasClass(element, className) {
  return new RegExp('\\b' + className + '\\b').test(element.className); // Применяем регулярное выражение для поиска
}

Нюансы работы с регулярными выражениями

При использовании регулярных выражений крайне важно верно определить границы класса, чтобы избежать ложных срабатываний. К примеру, класс 'pad' не должен соответствовать классу 'notepad'.

const regex = new RegExp('\\b' + 'pad' + '\\b'); // Поиск точного совпадения с "pad"

Внедрение функций на базе регулярных выражений оптимизирует структуру кода и повышает его читаемость.

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

Вообразите, что DOM – это океан, и вы ищете рыбку с уникальными жабрами:

🔎 Рыбка с золотыми жабрами где-то в этом океане:

const ocean = document.querySelectorAll('.fish');
const fishWithGoldenGills = Array.from(ocean).find(fish => fish.classList.contains('golden-gill'));

fishWithGoldenGills ? '👍 Нашли рыбку с золотыми жабрами!' : '😕 Золотогиллых рыбок не нашли!';

- 🐠 Океан: [💦, 🐟, 🦈, 🦐]
- 🔍 Ищем: **"golden-gill"**
- 🎯 Результат: [🐠💦] **"Найдено ли что-то?"**

Такая аналогия наглядно демонстрирует процесс поиска элемента с определённым классом, как если бы мы отыскивали рыбку с редкими узорами.

Однострочные функции – мастерство лаконичности

Если вы придерживаетесь принципов чистоты и лаконичности в коде по подобию jQuery, можете использовать однострочные функции:

const hasClass = (element, cls) => element.classList.contains(cls); // Всё прозрачно и ясно!

Сочетание потенциала JavaScript и простоты в использовании jQuery обеспечивает высокую функциональность кода в сжатой форме.

Погружение в classList

Для более глубокого знакомства со classList вам откроется доступ к методам типа replace(oldClass, newClass), которые удобны для переключения классов и работы сразу с несколькими классами:

element.classList.add('first-class', 'second-class'); // Добавляем сразу два класса
element.classList.remove('third-class', 'fourth-class'); // Удаляем также два класса

Интеграция проверки классов в логику приложения

Проверку классов можно встроить прямо в бизнес-логику:

if (element.classList.contains('highlight')) {
  // Выполняем операции, связанные с наличием класса 'highlight'
}

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

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

1. Element: classList property – Web APIs | MDN — подробное руководство по API classList в JavaScript.
2. Check if an element contains a class in JavaScript? – Stack Overflow — различные способы и обсуждения способов проверки наличия класса, предложенные сообществом разработчиков.
3. HTML DOM Element classList Property — обучающие материалы и примеры использования свойства classList в DOM.
4. The .classList() API | CSS-Tricks — советы по применению classList в реальных задачах.
5. Type, class, and ID selectors – Learn web development | MDN — общая информация о CSS-селекторах, необходимых для работы с классами в JavaScript.