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>, которые содержат атрибут 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 даёт нам ожидаемый результат. Только соответстующие селекторы в потомках базового элемента:

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()' в этой спецификации.
Устаревшая Оригинальное определение

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
querySelectorAllChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 3.5IE Полная поддержка 8Opera Полная поддержка 10Safari Полная поддержка 3.2WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка 10.1Safari iOS Полная поддержка ДаSamsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Совместимость неизвестна  
Совместимость неизвестна

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