1. Основное использование:
   Метод querySelector принимает селектор CSS в качестве параметра и возвращает первый элемент, соответствующий селектору. Вот пример:

   const element = document.querySelector('.my-class');

2. Выбор элементов по идентификатору:
   Вы можете использовать символ «#», чтобы выбирать элементы по их идентификатору. Вот пример:

   const element = document.querySelector('#my-element');

3. Выбор элементов по классу:
   Чтобы выбрать элементы по их классу, вы можете использовать “.” символ. Вот пример:

   const elements = document.querySelectorAll('.my-class');

4. Выбор элементов по атрибуту:
   Вы также можете выбирать элементы на основе их атрибутов. Вот пример:

   const elements = document.querySelectorAll('input[type="text"]');

5. Выбор вложенных элементов.
   Метод querySelector позволяет выбирать элементы, вложенные в другие элементы. Вот пример:

   const element = document.querySelector('.parent-class .child-class');

6. Выбор нескольких элементов.
   Если вы хотите выбрать несколько элементов, соответствующих селектору, вы можете использовать метод querySelectorAll. Вот пример:

   const elements = document.querySelectorAll('.my-class');

Метод querySelector — это универсальный инструмент для выбора элементов в DOM с помощью селекторов CSS. Он обеспечивает гибкий способ динамического управления HTML-элементами и взаимодействия с ними. Освоив различные методы и примеры кода, обсуждаемые в этой статье, вы сможете улучшить свои навыки работы с JavaScript и создавать более интерактивные веб-приложения.