Использование QuerySelector в JavaScript

Метод querySelector() в JavaScript используется для выбора первого элемента из документа, который соответствует указанному CSS-селектору.

Например, если у вас есть элемент с именем класса "example", можно выбрать его с помощью следующего кода:

const element = document.querySelector('.example');

Также можно использовать этот метод для выбора элемента по его ID:

const element = document.querySelector('#example');

Если нужно выбрать первый элемент соответствующего типа, можно использовать его имя тега:

const element = document.querySelector('div');

В случае, если вам нужно выбрать несколько элементов, которые соответствуют одному CSS-селектору, можно воспользоваться методом querySelectorAll().

Пример:

const elements = document.querySelectorAll('.example');
elements.forEach((element) => {
  console.log(element);
});

Методы querySelector() и querySelectorAll() могут использоваться вместе с другими методами JavaScript, например, чтобы изменять или добавлять стили на выбранные элементы:

const elements = document.querySelectorAll('.example');
elements.forEach((element) => {
  element.style.color = 'red';
});

В общем, метод querySelector() очень удобный инструмент для работы с элементами на странице, потому что он позволяет быстро находить нужные элементы при помощи CSS-селекторов и проводить с ними дальнейшие операции через JavaScript.