JavaScript | Есть ли HTML-класс в DOM-документе?

Задача простая. Мы хотим получить истину или ложь, если искомый класс существует в объекте document.

Искомый HTML-класс у нас представлен в виде обычной строки JavaScript.

Как это проверить?

Решение через функцию, оператор if и метод querySelector()

Схема работы такая. Мы обращаемся к документу (document) и на нём вызываем метод querySelector(), который попытается отыскать в документе нужный нам элемент (объект HTML-элемента) по CSS-селектору.

Для примера возьмём селектор ".supplement-ts-container". Вам нужно выбрать свой.

if(document.querySelector('.supplement-ts-container')) {return true} else {return false}

...то же самое, только через условный оператор

(document.querySelector('.supplement-ts-container'))?true:false

Скриншот из браузера:

Оператор return является оператором "Внезапного завершения" выполнения функции, а значит он не может существовать вне тела какой-то функции. Завернём наш код в функцию:

function hasHTMLClass(CSSselector){
    if(document.querySelector('.'+CSSselector)) {return true} else {return false}
}

или

function hasHTMLClass(CSSselector){
    (document.querySelector('.'+CSSselector))?true:false
}

Эта функция будет работать только в браузере т. к. мы не передаём в неё объект документа, а обращаемся к нему напрямую из тела функции, предполагая, что он (документ) существует.

Мы видим в разметке нужный класс:

Мы вызываем нашу функцию и передаём в неё строку с СУЩЕСТВУЮЩИМ селектором класса:

Проверили наличие HTML-класса в объекте документа - JavaScript

В ответ нам возвращается true - истина. Это значит, что такой класс существует в документе.

Мы вызываем нашу функцию и передаём в неё строку с НЕ СУЩЕСТВУЮЩИМ селектором класса:

Проверили отсутствие HTML-класса в объекте документа - JavaScript

Дополнительно

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

if(document.querySelector('.supplement-ts-container')) {console.log('Класс существует')} else {console.log('Класс не найден')}

Информационные ссылки

Стандарт DOM - https://dom.spec.whatwg.org

Перевод стандарта DOM на русском языке - https://efim360.ru/dom/

Стандарт DOM - Раздел "node . querySelector(selectors)" - https://dom.spec.whatwg.org/#ref-for-dom-parentnode-queryselector①

Поделись записью