Document.querySelectorAll()

Синтаксис

elementList = document.querySelectorAll(selectors);

Параметры

selectors

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

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

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

Исключения

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

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

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

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

• Element.querySelector() and Element.querySelectorAll()
• Document.querySelector()
• DocumentFragment.querySelector() and DocumentFragment.querySelectorAll()
• ParentNode.querySelector() and ParentNode.querySelectorAll()
• Code snippets for querySelector