Урок: проверить CSS-селектор через matches()

Назначение

Element.matches позволяет проверить, соответствует ли конкретный элемент селектору. Это полезно при диагностике условий обработчика или правила оформления без перебора всех элементов документа.

Как это работает

Пример создаёт кнопку в памяти и задаёт класс и тип. Matches возвращает логический результат. Невалидный синтаксис селектора приводит к исключению, поэтому произвольные внешние строки нельзя считать готовыми селекторами.

Пример

const button = document.createElement("button");
button.type = "button";
button.className = "lesson-action";
console.log(button.matches("button.lesson-action"));
console.log(button.matches("a.lesson-action"));
button.disabled = true;
console.log(button.matches(":disabled"));

Что должно получиться

Первое условие истинно, второе ложно, после отключения кнопки совпадает :disabled. Для этих проверок не требуется добавлять кнопку в видимый документ.

Граница применения и частая ошибка

Matches проверяет сам элемент, а closest ищет подходящего его самого или предка. Состояния вроде :hover зависят от реального взаимодействия и не демонстрируются созданной в памяти кнопкой. Не собирайте селекторы из непроверенных значений без нужного экранирования.

Самостоятельная проверка

Добавьте второй класс и составьте условие с :not(). Затем проверяйте правило на выбранном элементе собственного документа. Сравните matches и querySelector: первый отвечает на вопрос о конкретном узле, второй ищет узел в области.

Связанные материалы

• Исходник и DOM
• Консоль
• Повторная проверка