Document.querySelectorAll()

Метод querySelectorAll() Document возвращает статический (не динамический) NodeList, содержащий все найденные элементы документа, которые соответствуют указанному селектору.

Примечание: Данный метод реализован на основе миксина ParentNode querySelectorAll() метода.

Синтаксис

elementList = document.querySelectorAll(selectors);

Параметры

selectors
Строка DOMString, содержащая один или более CSS селектор. Эта строка должна быть валидным CSS селектором. Если это не так, то генерируется SyntaxError. Смотрите Поиск элементов DOM с использованием селекторов для получения информации о том, распознавать элементы. Несколько селекторов нужно разделить запятыми.

Примечание: Символы, которые не являются частью стандартного синтаксиса CSS, должны быть экранированы с помощью символа обратной косой черты (\). Поскольку в JavaScript также используется экранирование обратной косой черты, при написании строковых литералов с использованием этих символов следует соблюдать особую осторожность. Для более подробной информации смотри Escaping special characters.

Возвращаемое значение

Статический (non-live) NodeList, содержащий все элементы в пределах документа, которые соответствуют как минимум одному из указанных селекторов, или пустой NodeList в случае отсутствия совпадений.

Примечание: Если в строке selectors содержатся CSS псевдоэлементы, то возвращаемый список будет всегда пуст.

Исключения

SyntaxError
Исключение SYNTAX_ERR происходит в случае передачи некорректной группы селекторов.

Примеры

Получение списка совпадений

Чтобы получить NodeList всех элементов <p> в документе:

var matches = document.querySelectorAll("p");

В этом примере возвращается список всех элементов <div> в документе, которые имеют класс note или alert:

var matches = document.querySelectorAll("div.note, div.alert");

Здесь мы получаем список элементов <p>, чьим непосредственным родительским элементом является <div> с классом highlighted, который расположен внутри контейнера с идентификатором test.

var container = document.querySelector("#test");
var matches = container.querySelectorAll("div.highlighted > p");

В этом примере используются селекторы атрибутов, чтобы вернуть список элементов <iframe> (en-US), которые содержат атрибут data-src:

var matches = document.querySelectorAll("iframe[data-src]");

Здесь селектор атрибута используется для возврата элементов списка, содержащихся в списке с идентификатором "userlist", который имеет атрибут "data-active" со значением "1":

var container = document.querySelector("#userlist");
var matches = container.querySelectorAll("li[data-active='1']");

Доступ к совпадениям

Вернув NodeList совпадений один раз, вы можете использовать его как простой массив. Если массив пустой (т. е. свойство length равно 0), то совпадений не было найдено.

В другом случае, вы можете использовать стандартную запись массива для доступа к содержимому. Вы можете использовать любой оператор зацикливания, например:

var highlightedItems = userList.querySelectorAll(".highlighted");

highlightedItems.forEach(function(userItem) {
  deleteUser(userItem);
});

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

querySelectorAll() ведёт себя не так, как большинство библиотек JavaScript DOM. Это может привести к неожиданным результатам.

HTML

Рассмотрим этот HTML с тремя вложенными <div> блоками.

<div class="outer">
  <div class="select">
    <div class="inner">
    </div>
  </div>
</div>

JavaScript

var select = document.querySelector('.select');
var inner = select.querySelectorAll('.outer .inner');
inner.length; // 1, не 0!

В данном примере, когда мы выбрали ".outer .inner" в контексте <div> с классом "select", элемент с классом ".inner" был всё равно найден, хотя .outer не является потомком элемента в котором происходил поиск (".select"). По умолчанию, querySelectorAll() проверяет только последний элемент без учёта контекста.

Псевдокласс :scope (en-US) даёт нам ожидаемый результат. Только соответствующие селекторы в потомках базового элемента:

var select = document.querySelector('.select');
var inner = select.querySelectorAll(':scope .outer .inner');
inner.length; // 0

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

Спецификация Статус Комментарий
DOM
Определение 'ParentNode.querySelectorAll()' в этой спецификации.
Живой стандарт Живой стандарт
Selectors API Level 2
Определение 'ParentNode.querySelectorAll()' в этой спецификации.
Устаревшая Без изменений
DOM4
Определение 'ParentNode.querySelectorAll()' в этой спецификации.
Устаревшая Изначальное определение
Selectors API Level 1
Определение 'document.querySelector()' в этой спецификации.
Устаревшая Оригинальное определение

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также