QuerySelectorAll в JavaScript: как использовать селекторы для поиска элементов на странице

Метод querySelectorAll в JavaScript позволяет выбрать все элементы на странице, которые соответствуют указанному селектору CSS. Он возвращает список элементов, который можно перебрать в цикле.

Пример использования:

HTML:

html

  
Item 1
  
Item 2
  
Item 3

JavaScript:

javascript
const items = document.querySelectorAll('.list-item');
// перебор элементов
items.forEach(item => {
  console.log(item.textContent);
});
// получение элемента по индексу
const secondItem = items[1];

В данном примере мы получаем все элементы списка с помощью селектора `.list-item` и сохраняем их в переменную `items`. Затем мы перебираем каждый элемент с помощью метода `forEach`, выводим содержимое каждого элемента в консоль и получаем второй элемент списка с помощью доступа по индексу.

Также можно использовать комбинации селекторов для более точного выбора элементов. Например, `.list-item.item-2` выберет только элемент списка с классами `list-item` и `item-2`.