Document.querySelectorAll()

selectors

Строка DOMString, содержащая один или более CSS селектор (en-US). Эта строка должна быть валидным 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> (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 с тремя вложенными <div> блоками.

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

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

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