JavaScript QuerySelectorAll: поиск элементов на странице с помощью CSS-селекторов

JS querySelectorAll - это метод, который позволяет выбрать элементы на веб-странице, используя селекторы CSS. В результате работы метода возвращается коллекция элементов NodeList.

Для использования метода querySelectorAll необходимо вызвать его у элемента Document и передать ему в качестве аргумента строку селектора.

Пример выборки всех элементов с классом "my-class":

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

Можно использовать любые селекторы CSS. Например, чтобы выбрать все элементы списка ul, находящиеся в элементе с id "my-list", можно использовать следующий код:

js
const myListElements = document.querySelectorAll("#my-list ul");

Также можно комбинировать несколько селекторов. Например, чтобы выбрать все элементы с классом "my-class", которые находятся внутри списка ul с id "my-list", можно использовать такой код:

js
const myElementsInList = document.querySelectorAll("#my-list ul .my-class");

С помощью метода querySelectorAll можно производить множество операций с выбранными элементами, например, изменять их содержимое или добавлять к ним обработчики событий.

Также важно отметить, что метод querySelectorAll возвращает статическую коллекцию элементов NodeList. Это значит, что любые изменения в документе после выполнения метода не будут отражены в коллекции. Если необходимо получить динамическую коллекцию элементов, то лучше использовать методы document.getElementsByTagName или document.getElementsByClassName.

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

js
const allPElems = document.getElementsByTagName("p");

Или чтобы выбрать все элементы соответствующие классу "my-class", можно использовать метод document.getElementsByClassName:

js
const allElemsWithClass = document.getElementsByClassName("my-class");