QuerySelector: эффективный способ выбора элементов на странице

querySelector — это метод объекта document, который позволяет выбирать DOM элементы по заданным селекторам. Он возвращает первый найденный элемент или null, если селектор не соответствует ни одному элементу.

Пример использования querySelector для выбора элемента по его id:

HTML:

Это мой элемент

JavaScript:

var element = document.querySelector("#my-element");
console.log(element); // Вывод: 
Это мой элемент

В данном примере мы передаем символ "#" в качестве селектора, чтобы указать, что мы ищем элемент с определенным идентификатором my-element.

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

HTML:

Это мой элемент
Это еще один мой элемент

JavaScript:

var elements = document.querySelectorAll(".my-class");
console.log(elements); // Вывод: NodeList [ 
Это мой элемент
, 
Это еще один мой элемент
 ]

В данном примере мы передаем символ "." в качестве селектора, чтобы указать, что мы ищем элементы с определенным классом my-class. Примечательно, что мы использовали метод querySelectorAll, который возвращает все элементы, соответствующие данному селектору, вместо querySelector, который возвращает только первый найденный элемент.