path: root/files/ru/web/api/document/queryselectorall/index.html

---
title: Document.querySelectorAll()
slug: Web/API/Document/querySelectorAll
tags:
  - API
  - DOM
  - Document
  - Method
  - Selectors
translation_of: Web/API/Document/querySelectorAll
---
<div>{{ ApiRef("DOM") }}</div>

<p>Метод <code><strong>querySelectorAll()</strong></code> {{domxref("Document")}} возвращает статический (не динамический) {{domxref("NodeList")}}, содержащий все найденные элементы документа, которые соответствуют указанному селектору.</p>

<div class="blockIndicator note">
<p><strong>Примечание:</strong> Данный метод реализован на основе миксина {{domxref("ParentNode")}} {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} метода.</p>
</div>

<h2 id="Syntax" name="Syntax">Синтаксис</h2>

<pre class="brush: js">elementList = document.querySelectorAll(selectors);
</pre>

<h3 id="Параметры">Параметры</h3>

<dl>
 <dt><strong><code>selectors</code></strong></dt>
 <dd>Строка {{domxref("DOMString")}}, содержащая один или более <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">CSS селектор</a>. Эта строка должна быть валидным <a href="/ru/docs/Web/CSS/CSS_Selectors">CSS селектором</a>. Если это не так, то генерируется <code>SyntaxError</code>. Смотрите <a href="/ru/docs/DOM/DOM_Reference/Locating_DOM_elements_using_selectors">Поиск элементов DOM с использованием селекторов</a> для получения информации о том, распознавать элементы. Несколько селекторов нужно разделить запятыми.</dd>
</dl>

<div class="note">
<p><strong>Примечание:</strong> Символы, которые не являются частью стандартного синтаксиса CSS, должны быть экранированы с помощью символа обратной косой черты (<code>\</code>). Поскольку в JavaScript также используется экранирование обратной косой черты, при написании строковых литералов с использованием этих символов следует соблюдать особую осторожность. Для более подробной информации смотри {{anch("Escaping special characters")}}.</p>
</div>

<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>

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

<div class="note">
<p><strong>Примечание:</strong> Если в строке <code>selectors</code> содержатся <a href="/ru/docs/Web/CSS/Pseudo-elements">CSS псевдоэлементы</a>, то возвращаемый список будет всегда пуст.</p>
</div>

<h3 id="Исключения">Исключения</h3>

<dl>
 <dt><code>SyntaxError</code></dt>
 <dd>Исключение <code>SYNTAX_ERR</code> происходит в случае передачи некорректной группы селекторов.</dd>
</dl>

<h2 id="Examples" name="Examples">Примеры</h2>

<h3 id="Получение_списка_совпадений">Получение списка совпадений</h3>

<p>Чтобы получить {{domxref("NodeList")}} всех элементов {{HTMLElement("p")}} в документе:</p>

<pre class="brush: js">var matches = document.querySelectorAll("p");</pre>

<p>В этом примере возвращается список всех элементов {{HTMLElement ("div")}} в документе, которые имеют класс <code>note</code> или <code>alert</code>:</p>

<pre class="brush: js">var matches = document.querySelectorAll("div.note, div.alert");
</pre>

<p>Здесь мы получаем список элементов <code>&lt;p&gt;</code>, чьим непосредственным родительским элементом явялется {{HTMLElement("div")}} с классом <code>highlighted</code>, который расположен внутри контейнера с идентификатором <code>test</code>.</p>

<pre class="brush: js">var container = document.querySelector("#test");
var matches = container.querySelectorAll("div.highlighted &gt; p");</pre>

<p>В этом примере используются <a href="/ru/docs/Web/CSS/Attribute_selectors">селекторы атрибутов</a>, чтобы вернуть список элементов {{HTMLElement("iframe")}}, которые содержат атрибут <code>data-src</code>:</p>

<pre class="brush: js">var matches = document.querySelectorAll("iframe[data-src]");</pre>

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

<pre class="brush: js">var container = document.querySelector("#userlist");
var matches = container.querySelectorAll("li[data-active='1']");</pre>

<h3 id="Доступ_к_совпадениям">Доступ к совпадениям</h3>

<p>Вернув {{domxref("NodeList")}} совпадений один раз, вы можете использовать его как простой массив. Если массив пустой (т. е. свойство <code>length</code> равно 0), то совпадений не было найдено.</p>

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

<pre class="brush: js">var highlightedItems = userList.querySelectorAll(".highlighted");

highlightedItems.forEach(function(userItem) {
  deleteUser(userItem);
});</pre>

<h2 id="Примечания_пользователя">Примечания пользователя</h2>

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

<h3 id="HTML">HTML</h3>

<p>Рассмотрим этот HTML с тремя вложенными {{HTMLElement("div")}} блоками.</p>

<pre class="brush: html">&lt;div class="outer"&gt;
  &lt;div class="select"&gt;
    &lt;div class="inner"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>

<h3 id="JavaScript">JavaScript</h3>

<pre class="brush: js">var select = document.querySelector('.select');
var inner = select.querySelectorAll('.outer .inner');
inner.length; // 1, не 0!</pre>

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

<p>Псевдокласс {{cssxref(":scope")}} даёт нам ожидаемый результат. Только соответстующие селекторы в потомках базового элемента:</p>

<pre class="brush: js">var select = document.querySelector('.select');
var inner = select.querySelectorAll(':scope .outer .inner');
inner.length; // 0</pre>

<h2 id="Спецификации"><span style="font-size: 2.33333rem; letter-spacing: -0.00278rem;">Спецификации</span></h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Комментарий</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
   <td>{{Spec2("DOM WHATWG")}}</td>
   <td>Живой стандарт</td>
  </tr>
  <tr>
   <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
   <td>{{Spec2("Selectors API Level 2")}}</td>
   <td>Без изменений</td>
  </tr>
  <tr>
   <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
   <td>{{Spec2("DOM4")}}</td>
   <td>Изначальное определение</td>
  </tr>
  <tr>
   <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td>
   <td>{{Spec2("Selectors API Level 1")}}</td>
   <td>Оригинальное определение</td>
  </tr>
 </tbody>
</table>

<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>

<p>{{Compat("api.Document.querySelectorAll")}}</p>

<h2 id="Смотрите_также"><span style='font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,serif; font-size: 2.33333rem; letter-spacing: -0.00278rem;'>Смотрите также</span></h2>

<ul>
 <li>{{domxref("Element.querySelector()")}} and {{domxref("Element.querySelectorAll()")}}</li>
 <li>{{domxref("Document.querySelector()")}}</li>
 <li>{{domxref("DocumentFragment.querySelector()")}} and {{domxref("DocumentFragment.querySelectorAll()")}}</li>
 <li>{{domxref("ParentNode.querySelector()")}} and {{domxref("ParentNode.querySelectorAll()")}}</li>
 <li><a href="/en-US/docs/Code_snippets/QuerySelector">Code snippets for <code>querySelector</code></a></li>
</ul>