1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
---
title: Element.querySelectorAll()
slug: Web/API/Element/querySelectorAll
translation_of: Web/API/Element/querySelectorAll
---
<h2 id="Summary">Общая информация</h2>
<p>Возвращает список типа <a href="/ru/docs/Web/API/NodeList">NodeList</a>, состоящий из всех элементов, которые являются потомками для элемента, над которым была выполнена функция и удовлетворяющим условию выборки.</p>
<h2 id="Syntax">Синтаксис</h2>
<pre class="syntaxbox"><em>elementList</em> = baseElement.querySelectorAll(<em>selectors</em>);
</pre>
<p>где</p>
<ul>
<li><code>elementList —</code> результирующий список объектов типа <a href="/ru/docs/Web/API/Element">element</a> (результаты).</li>
<li><code>baseElement —</code> <a href="/ru/docs/Web/API/Element">элемент</a>, над которым выполняется функция.</li>
<li><code>selectors —</code> <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">текст селектора</a> для выбора нужных элементов.</li>
</ul>
<h2 id="Example">Примеры</h2>
<p>Этот пример возвращает список всех элементов с тегом p, которые находятся в теле документа:</p>
<pre class="brush: js">var matches = document.body.querySelectorAll('p');
</pre>
<p>Этот пример возвращает список всех элементов с тегом p, которые находятся непосредственно в элементах-контейнерах с тегом div, имеющих класс 'highlighted', которые в свою очередь находятся внутри элемента с идентификатором 'test':</p>
<pre class="brush:js">var el = document.querySelector('#test');
var matches = el.querySelectorAll('div.highlighted > p');
</pre>
<p>Этот пример возвращает список всех элементов iframe, которые имеют атрибут "data-src":</p>
<pre class="brush: js">var matches = el.querySelectorAll('iframe[data-src]');
</pre>
<h2 id="Notes">Примечания</h2>
<p>Функция выбрасывает исключение SYNTAX_ERR, если текст селектора неправильный.</p>
<p>querySelectorAll() был представлен как часть WebApps API.</p>
<p>Строка указанная в качестве текста селектора, должна соответствовать синтаксису CSS.</p>
<p>Помните, что возвращённый в качестве результата список <a href="/ru/docs/Web/API/NodeList">NodeList</a> не рекомендуется для использования в циклах (например, в for(...)) в качестве массива, т.к., это не массив в «традиционном» понятии Javascript, а объект типа <a href="/ru/docs/Web/API/NodeList">NodeList</a>, который, хоть и схож по свойствам с массивом, но не является таковым в полной мере (не поддерживает все методы, доступные массиву), так что будьте осторожны.</p>
<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
<div></div>
<p>{{Compat}}</p>
<h2 id="Specification">Ссылки на спецификации</h2>
<ul>
<li><a href="http://www.w3.org/TR/selectors-api/">Selectors API</a></li>
</ul>
<h2 id="See_also">Смотрите также</h2>
<ul>
<li><a href="/en-US/docs/DOM/Document.querySelectorAll" title="DOM/document.querySelectorAll"><code>document.querySelectorAll</code></a></li>
<li><a href="/en-US/docs/DOM/Document.querySelector" title="DOM/document.querySelector"><code>document.querySelector</code></a></li>
<li><a href="/en-US/docs/Code_snippets/QuerySelector" title="Code_snippets/QuerySelector">Сниппеты для <code>querySelector</code></a></li>
</ul>
|
