QuerySelectorAll: примеры (JAVASCRIPT)

Краткие примеры использования

Выбор всех элементов с определённым классом:

const elements = document.querySelectorAll('.item');
console.log(elements.length);

// Результат: количество элементов с классом 'item'

Использование нескольких селекторов:

const elems = document.querySelectorAll('div, p');
console.log(elems);

// NodeList(5) [div, p, p, div, p]

Выбор по вложенности и атрибуту:

const links = document.querySelectorAll('nav a[target="_blank"]');
links.forEach(link => console.log(link.href));

// В консоль выводятся ссылки, соответствующие условию

Похожие методы в JavaScript

querySelector() возвращает первый найденный элемент, а не коллекцию.

getElementsByClassName() и getElementsByTagName() возвращают "живые" коллекции (HTMLCollection), которые автоматически обновляются. Они работают быстрее, но поддерживают только простые селекторы.

getElementById() предназначен для выбора элемента по уникальному идентификатору.

Метод querySelectorAll предпочтительнее при работе со сложными CSS-селекторами и когда необходима статическая коллекция элементов.

Распространённые ошибки

Ожидание, что возвращаемая коллекция является массивом:

const items = document.querySelectorAll('.list-item');
items.map(item => item.textContent); // Ошибка

// TypeError: items.map is not a function

Некорректный синтаксис селектора:

document.querySelectorAll('div:unknown-pseudo');

// DOMException: Failed to execute 'querySelectorAll' on 'Document': 'div:unknown-pseudo' is not a valid selector.

Игнорирование статичности коллекции:

const divs = document.querySelectorAll('div');
document.body.appendChild(document.createElement('div'));
console.log(divs.length); // Количество не изменилось

// Первоначальное количество div

История изменений

Спецификация метода не претерпела значительных изменений. Основным развитием стало добавление метода forEach для объектов NodeList в современных стандартах, что позволило перебирать элементы без предварительного преобразования в массив.

Расширенные примеры

Использование псевдоклассов в селекторах:

const thirdItem = document.querySelectorAll('ul li:nth-child(3n)');
thirdItem.forEach(li => li.style.color = 'red');

// Каждый третий элемент списка становится красным

Применение к конкретному элементу, а не всему документу:

const container = document.getElementById('container');
const innerDivs = container.querySelectorAll('div');
console.log(innerDivs);

// NodeList с div внутри элемента #container

Селектор по наличию данных атрибута:

const dataItems = document.querySelectorAll('[data-price]');
let total = 0;
dataItems.forEach(item => {
  total += parseInt(item.dataset.price);
});
console.log(total);

// Сумма значений data-price

Комбинирование с событиями для делегирования:

document.querySelectorAll('.dynamic-btn').forEach(button => {
  button.addEventListener('click', (e) => {
    console.log(e.target.textContent);
  });
});

// При клике на кнопку выводится её текст

Аналоги в других языках

В Python с библиотекой BeautifulSoup:

from bs4 import BeautifulSoup
soup = BeautifulSoup(html, 'html.parser')
elements = soup.select('div.class')
print(elements)

[<div class="class">...</div>]

В PHP с использованием DOMXPath:

$dom = new DOMDocument();
@$dom->loadHTML($html);
$xpath = new DOMXPath($dom);
$elements = $xpath->query('//div[@class="item"]');
foreach ($elements as $el) echo $dom->saveHTML($el);

<div class="item">...</div>

В jQuery используется метод $(), который возвращает специальный объект с элементами, соответствующими селектору.