JavaScript QuerySelector: Начиная с основ

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

Синтаксис метода выглядит следующим образом:

document.querySelector(CSS-селектор);

CSS-селектор может быть любым допустимым CSS-селектором. Например, мы можем использовать селектор для получения элемента по его идентификатору:

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

Мы также можем использовать селекторы для получения элементов по имени класса, тегу элемента и т.д. Например, мы можем получить первый элемент с классом "someClass":

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

Если таких элементов несколько, метод вернет только первый найденный элемент.

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

const parentElement = document.getElementById('parentId');

const childElement = parentElement.querySelector('.childClass');

В данном случае мы получаем первый элемент с классом "childClass" внутри элемента с идентификатором "parentId".

Пример использования метода querySelector() для добавления обработчика события клика на кнопку:

const button = document.querySelector('.myButton');

button.addEventListener('click', function() {

console.log('Кнопка нажата');

});

В данном примере мы получаем первую кнопку на странице с классом "myButton" и добавляем обработчик события клика на нее, выводящий сообщение в консоль.