Использование Document.querySelector для выбора элементов на веб-странице

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

Для начала, давайте разберемся, что такое CSS-селектор. CSS-селекторы определяют, какие элементы веб-страницы будут соответствовать определенному стилю. Селекторы могут указывать на теги HTML, классы, идентификаторы, атрибуты и другие характеристики элементов.

Метод querySelector() позволяет использовать практически все css-селекторы, которые вы бы использовали в файле стилей CSS. Например, вы можете использовать:

• tag для поиска элементов по их тегу, например: document.querySelector('div') найдет первый элемент <div> на странице.
• .class для поиска элементов по классу, например: document.querySelector('.my-class') найдет первый элемент с классом "my-class".
• #id для поиска элементов по идентификатору, например: document.querySelector('#my-id') найдет первый элемент с идентификатором "my-id".
• [attribute=value] для поиска элементов по атрибуту и его значению, например: document.querySelector('[name="my-name"]') найдет первый элемент с атрибутом name и значением "my-name".

Примеры кода:

1. Поиск элемента по id и изменение его содержимого:

const element = document.querySelector('#my-element');
element.innerHTML = 'Новое содержимое';

2. Поиск элемента по классу и добавление ему нового класса:

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

3. Поиск элемента по селектору тега и изменение его стиля:

const element = document.querySelector('div');
element.style.backgroundColor = 'red';

4. Поиск элемента по селектору атрибута и добавление обработчика события:

const element = document.querySelector('[name="my-button"]');
element.addEventListener('click', () => {
  console.log('Клик по кнопке');
});

Метод querySelector() возвращает первый найденный элемент, соответствующий заданному селектору. Если ни один элемент не найден, он возвращает null. Если вы хотите получить все элементы, соответствующие селектору, вы можете использовать метод querySelectorAll().

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