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