Задача простая. Мы хотим получить истину или ложь, если искомый класс существует в объекте 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 }
Эта функция будет работать только в браузере т. к. мы не передаём в неё объект документа, а обращаемся к нему напрямую из тела функции, предполагая, что он (документ) существует.
Мы видим в разметке нужный класс:
Мы вызываем нашу функцию и передаём в неё строку с СУЩЕСТВУЮЩИМ селектором класса:
В ответ нам возвращается true — истина. Это значит, что такой класс существует в документе.
Мы вызываем нашу функцию и передаём в неё строку с НЕ СУЩЕСТВУЮЩИМ селектором класса:
Дополнительно
Для своих тестов можно выводить в консоль сообщения, например:
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①