JavaScript метод ParentNode.querySelectorAll()

Определение и применение

JavaScript метод .querySelectorAll() объекта ParentNode возвращает список элементов (статичный (не живой) объект типа NodeList) с текущим элементом в качестве корневого, соответствующих указанному селектору, или группе селекторов, которые являются потомками объекта, на котором был вызван метод. Если совпадений не найдено, то возвращается пустой NodeList.

Объект NodeList представляет из себя набор узлов, к которым можно обращаться по номерам индексов, индекс коллекции начинается с 0. Вы можете использовать свойство length объекта NodeList для определения количества элементов, соответствующих указанному селектору и при необходимости перебирать все эти элементы в цикле.

Этот метод так же реализован как Document.querySelectorAll(), DocumentFragment.querySelectorAll() и Element.querySelectorAll().

Если вам необходимы все элементы в документе, которые соответствуют указанному селектору или селекторам, то используйте для этого метод .querySelectorAll() объекта Document.

Метод querySelectorAll() также определен в объекте Element, по этой причине он может быть вызван на любом элементе, не только на объекте Document, или ParentNode. Элемент, на котором он вызывается будет использован в качестве корневого элемента для поиска.

Поддержка браузерами

Спецификация: dom.spec.whatwg

Поддерживается во всех основных браузерах с 2015 года.

ВсеКомпьютерыМобильные

Совместимостьapi.Element.querySelectorAll
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`querySelectorAll`	✓1	✓12	✓3.5	✓10	✓3.1	✓18	✓4	✓10.1	✓2	✓1.0	✓4.4	✓2

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

JavaScript синтаксис

JavaScript

const elements = parentNode.querySelectorAll(selectors);

Спецификация

DOM Standard.

Значения параметров

Параметр Описание selectors — ParentNode.querySelectorAll()
Параметр	Описание
`selectors`	Аргумент должен соответствовать допустимой строке селектора, содержащей один или несколько селекторов. При указании нескольких селекторов необходимо разделять значения запятыми. В этом случае будут выбраны все элементы, соответствующие любому из заданных селекторов, в порядке их следования в документе. Если по какой-то причине вы используете в наименовании селекторов символы, которые не являются частью стандартного синтаксиса CSS, то при поиске такие символы должны быть экранированы с помощью символа обратной косой черты (`"\"`). Поскольку обратная косая черта также является специальным символом (escape) в JavaScript, то при вводе литеральной строки ее необходимо экранировать дважды. Обязательный параметр.

Исключения

Тип исключения Описание — ParentNode.querySelectorAll()
Тип исключения	Описание
`SyntaxError`	Возникает в том случае, если синтаксис указанного селектора или селекторов некорректен.

Для значения id, включаемого в селектор, используйте CSS.escape(id): допустимый HTML-идентификатор не обязательно допустим в CSS без экранирования. Неверный синтаксис селектора вызывает SyntaxError.

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

Поиск всех подходящих потомков

Нажмите ▶: для каждой найденной секции querySelectorAll() вернёт только её собственные элементы .active, поэтому в консоли появятся два отдельных массива.

index.html

HTML

<section class="first"><p class="active">Первый</p></section>
<section class="block"><p class="active">Второй</p></section>

main.js

JavaScript

const containers = document.querySelectorAll('.first, .block')
for (const container of containers) {
    const activeElements = container.querySelectorAll('.active')
    console.log(Array.from(activeElements, (element) => element.textContent))
}

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

Более подробную практическую информацию вы можете получить в описании метода .querySelectorAll() объекта Document.