Как проверить, содержит ли HTML элемент класс в JavaScript

Современный и рекомендуемый способ проверить, содержит ли элемент определенный класс в чистом JavaScript, — это использовать метод classList.contains(). Этот метод специально разработан для этой цели и автоматически обрабатывает несколько классов.

var test = document.getElementById("test");
if (test.classList.contains("class1")) {
    test.innerHTML = "У меня есть class1";
}

Содержание

• Современное решение: classList.contains()
• Вопросы совместимости с браузерами
• Традиционные альтернативы
• Практические примеры
• Полная реализация функции

Современное решение: classList.contains()

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

// Получаем элемент
var element = document.getElementById("test");

// Проверяем, содержит ли он определенный класс
if (element.classList.contains("class1")) {
    console.log("Элемент содержит class1");
} else {
    console.log("Элемент не содержит class1");
}

Этот метод автоматически обрабатывает:

• Несколько классов в элементе
• Пробелы в начале и в конце
• Чувствительность к регистру (CSS классы чувствительны к регистру)

Вопросы совместимости с браузерами

Хотя classList.contains() хорошо поддерживается в современных браузерах и доступен с июля 2015 года источник, для очень старых браузеров, таких как Internet Explorer 9 и более ранние версии, может потребоваться поддержка резервных вариантов.

Проверка поддержки classList

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

var element = document.getElementById("test");

if (element.classList) {
    // Современные браузеры
    if (element.classList.contains("class1")) {
        // Обработка class1
    }
} else {
    // Резервный вариант для старых браузеров
    // См. традиционные альтернативы ниже
}

Традиционные альтернативы

Для старых браузеров, которые не поддерживают classList, можно использовать следующие подходы:

1. Использование className со строковыми методами

Этот подход разбивает строку className и проверяет, существует ли класс в полученном массиве источник:

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

// Использование
var test = document.getElementById("test");
if (hasClass(test, "class1")) {
    test.innerHTML = "У меня есть class1";
}

2. Использование регулярных выражений

Этот подход использует регулярные выражения для сопоставления имени класса как границы слова источник:

function hasClass(element, className) {
    var re = new RegExp('\\b' + className + '\\b');
    return re.test(element.className);
}

// Использование
var test = document.getElementById("test");
if (hasClass(test, "class1")) {
    test.innerHTML = "У меня есть class1";
}

Практические примеры

Проверка нескольких классов

var element = document.getElementById("test");

if (element.classList.contains("active") && element.classList.contains("highlight")) {
    element.style.backgroundColor = "yellow";
}

Переключение классов на основе условия

var element = document.getElementById("test");

if (element.classList.contains("mobile")) {
    element.classList.remove("desktop");
    element.classList.add("mobile-view");
}

Работа с несколькими элементами

var elements = document.querySelectorAll(".card");

elements.forEach(function(element) {
    if (element.classList.contains("featured")) {
        element.style.border = "2px solid gold";
    }
});

Полная реализация функции

Вот надежная кросс-браузерная функция для проверки наличия класса:

/**
 * Проверяет, содержит ли элемент определенный класс
 * @param {HTMLElement} element - Элемент для проверки
 * @param {string} className - Имя класса для проверки
 * @returns {boolean} - True, если элемент содержит класс, иначе false
 */
function hasClass(element, className) {
    if (!element || !className) return false;
    
    // Современные браузеры
    if (element.classList) {
        return element.classList.contains(className);
    }
    
    // Старые браузеры
    var classNameRegex = new RegExp('\\b' + className + '\\b');
    return classNameRegex.test(element.className);
}

// Пример использования с вашим исходным кодом:
var test = document.getElementById("test");

if (hasClass(test, "class1")) {
    test.innerHTML = "У меня есть class1";
} else if (hasClass(test, "class2")) {
    test.innerHTML = "У меня есть class2";
} else if (hasClass(test, "class3")) {
    test.innerHTML = "У меня есть class3";
} else if (hasClass(test, "class4")) {
    test.innerHTML = "У меня есть class4";
} else {
    test.innerHTML = "";
}

Почему ваш исходный подход не сработал

Ваш оператор switch не работает, потому что он ищет точные совпадения с className. Когда элемент имеет несколько классов, например "class1 class5", свойство className возвращает всю строку, а не отдельные классы. Метод classList.contains() правильно обрабатывает это, проверяя, существует ли указанный класс где-либо в разделенном пробелами списке.

Вопросы производительности

• classList.contains() обычно является самым быстрым методом для современных браузеров
• Манипуляции со строками могут быть медленнее, но работают универсально
• Регулярные выражения гибкие, но могут быть избыточными для простой проверки классов

Для большинства современных веб-разработок использование classList.contains() является рекомендуемым подходом благодаря своей простоте, читаемости и производительности источник.

Заключение

Правильный способ проверить, содержит ли HTML-элемент определенный класс с помощью чистого JavaScript, — это использовать метод classList.contains(). Этот метод:

• Надежный: Специально разработан для проверки наличия класса
• Эффективный: Оптимизированная производительность в современных браузерах
• Читаемый: Чистый и понятный код
• Совместимый: Работает во всех современных браузерах (IE11+)

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

Источники

1. Element: classList property - Web APIs | MDN
2. DOMTokenList: contains() method - Web APIs | MDN
3. How to Check If an Element Contains a Class in JavaScript - W3Docs
4. Check If Element Has Class Name in Pure JavaScript - Designcise
5. Check if an Element Contains a Class in JavaScript - JavaScript Tutorial