queryselector - "сложный" запрос.
 

Никак не могу осилить, как писать запросы сложнее, чем поиск просто по имени класса для queryselector().
Помогите пожалуйста с примером, как должен выглядеть запрос для queryselector() - вот к примеру для такого элемента:

<button type="button" id="compactPitch" class="sc-fzoYHE sc-fznLPX dDZlPu">

То есть найти именно точно совпадение все трех атрибутов и их значений ?

Andy_kun,

let button  = document.querySelector(`[type="button"][id="compactPitch"][class="sc-fzoYHE sc-fznLPX dDZlPu"]`);

Andy_kun,
https://learn.javascript.ru/css-selectors

Тут достаточно #compactPitch.
Id - уникален на станице.

Также к явно сгенерированным классам типа dDZlPu не следует привязываться никогда. Эти классы изменятся в любой момент, при следующем обновлении фронта.

Спасибо!

А подскажите пожалуйста, а как Вы это поняли ? То есть я имею ввиду почему класс в котором есть "dDZlPu" - обязательно изменится ?
Или что Вы имели ввиду под "следующем обновлении фронта" ?

Andy_kun, ну какбэ я не вижу смысла в наборе символов dDZlPu, с вероятностью в 99% это имя класса сгенерировано минификатором\css-module'м, а не написано руками. Сгенерированные имена как правило меняются при каждой сборке. Каждое обновление кода - новая сборка.

А если у условной кнопки такое сгенерированное имя класса, и я настроил автоматический клик по кнопке - получается, при каждом генерировании нового класса для кнопки автоматизация будет по сути бесполезной ?

Andy_kun, да, привязываться стоит к тому, что не меняется.