initial commit

1 files changed, 165 insertions, 0 deletions

diff --git a/files/ru/web/api/document/queryselectorall/index.html b/files/ru/web/api/document/queryselectorall/index.html
new file mode 100644
index 0000000000..3706d0099d
--- /dev/null
+++ b/files/ru/web/api/document/queryselectorall/index.html
@@ -0,0 +1,165 @@
+---
+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>