Element.querySelectorAll()

Общая информация

Возвращает список типа NodeList, состоящий из всех элементов, которые являются потомками для элемента, над которым была выполнена функция и удовлетворяющим условию выборки.

Синтаксис

elementList = baseElement.querySelectorAll(selectors);

где

  • elementList — результирующий список объектов типа element (результаты).
  • baseElement — элемент, над которым выполняется функция.
  • selectors — текст селектора для выбора нужных элементов.

Примеры

Этот пример возвращает список всех элементов с тегом p, которые находятся в теле документа:

var matches = document.body.querySelectorAll('p'); 

Этот пример возвращает список всех элементов с тегом p, которые находятся непосредственно в элементах-контейнерах с тегом div, имеющих класс 'highlighted', которые в свою очередь находятся внутри элемента с идентификатором 'test':

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

Этот пример возвращает список всех элементов iframe, которые имеют атрибут "data-src":

var matches = el.querySelectorAll('iframe[data-src]'); 

Заметки

Функция выбрасывает исключение SYNTAX_ERR, если текст селектора неправильный.

querySelectorAll() был представлен как часть WebApps API.

Строка указанная в качестве текста селектора, должна соответствовать синтаксису CSS.

Помните, что возвращённый в качестве результата список NodeList не рекомендуется для использования в циклах (например, в for(...)) в качестве массива, т.к., это не массив в «традиционном» понятии Javascript, а объект типа NodeList, который, хоть и схож по свойствам с массивом, но не является таковым в полной мере (не поддерживает все методы, доступные массиву), так что будьте осторожны.

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
querySelectorAllChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 3.5IE Полная поддержка 9
Полная поддержка 9
Частичная поддержка 8
Замечания
Замечания querySelectorAll() is supported, but only for CSS 2.1 selectors.
Opera Полная поддержка 10Safari Полная поддержка 3.1WebView Android Полная поддержка 1Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 10.1Safari iOS Полная поддержка 2Samsung Internet Android Полная поддержка 1.0

Легенда

Полная поддержка  
Полная поддержка
Смотрите замечания реализации.
Смотрите замечания реализации.

Ссылки на спецификации

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