From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/api/document/queryselector/index.html | 131 +++++++++++++++++++++ 1 file changed, 131 insertions(+) create mode 100644 files/ru/web/api/document/queryselector/index.html (limited to 'files/ru/web/api/document/queryselector') diff --git a/files/ru/web/api/document/queryselector/index.html b/files/ru/web/api/document/queryselector/index.html new file mode 100644 index 0000000000..2a4803421f --- /dev/null +++ b/files/ru/web/api/document/queryselector/index.html @@ -0,0 +1,131 @@ +--- +title: Document.querySelector() +slug: Web/API/Document/querySelector +tags: + - CSS + - DOM + - Selector + - querySelector + - выборка + - поиск элемента + - поиск элементов + - селектор +translation_of: Web/API/Document/querySelector +--- +
{{ApiRef("DOM")}}
+ +

{{domxref("Document")}} метод querySelector() возвращает первый элемент ({{domxref("Element")}}) документа, который соответствует указанному селектору или группе селекторов. Если совпадений не найдено, возвращает значение null.

+ +
+

Заметка: Сопоставление выполняется с использованием обхода по предварительному порядку в глубину узлов документа, начиная с первого элемента в разметке документа и повторяя последовательные узлы по порядку количества дочерних узлов.

+
+ +

Синтаксис

+ +
element = document.querySelector(selectors);
+
+ +

Параметры

+ +
+
селекторы
+
{{domxref("DOMString")}}, содержайщий один или более селекторов для сопоставления. Эта строка должна быть допустимой строкой селектора CSS; если же нет, генерируется исключение SYNTAX_ERR. Смотрите Расположение элементов DOM с использованием селекторов для того, чтобы узнать больше о селекторах и о том, как ими управлять.
+
+ +
+

Заметка: Символы, которые не являются частью стандартного синтаксиса CSS должны быть экранированы символом обратной косой черты. Поскольку JavaScript также использует экранирование символом обратной косой черты, будьте особенно внимательны при написании строковых литералов с использованием этих символов. См. {{anch("Escaping special characters")}} для получения дополнительной информации.

+
+ +

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

+ +

Ссылка на объект типа {{domxref("Element")}}, являющийся первым элементов в документе, который соответствует указанному набору CSS селекторов, либо null, если совпадений нет.  

+ +

Если вам нужен список всех элементов, соответствующих указанным селекторам, используйте функцию {{domxref("Document.querySelectorAll", "querySelectorAll()")}}.

+ +

Исключения

+ +
+
SYNTAX_ERR
+
Некорректный синтаксис указанных селекторов selectors.
+
+ +

Примечания по использованию

+ +

Если указанный селектор соответствует идентификатору, который неправильно используется более одного раза в документе, возвращается первый элемент с этим идентификатором.

+ +

Псевдо-элементы CSS никогда не вернут никаких элементов, как указано в API селекторов.

+ +

Экранирование специальных символов

+ +

Чтобы сопоставить ID или селектроры, которые не соответствуют стандартному синтаксису CSS (например, использующих ненадлежащим образом двоеточие или пробел), необходимо экранировать символ обратной косой чертой ("\"). Поскольку обратная косая черта также является экранирующим символом в JavaScript, то при вводе литеральной строки необходимо экранировать ее дважды (первый раз для строки JavaScript и второй для querySelector()):

+ +
<div id="foo\bar"></div>
+<div id="foo:bar"></div>
+
+<script>
+  console.log('#foo\bar');               // "#fooar" (\b is the backspace control character)
+  document.querySelector('#foo\bar');    // Does not match anything
+
+  console.log('#foo\\bar');              // "#foo\bar"
+  console.log('#foo\\\\bar');            // "#foo\\bar"
+  document.querySelector('#foo\\bar'); // Match the first div
+
+  document.querySelector('#foo:bar');    // Does not match anything
+  document.querySelector('#foo\\:bar');  // Match the second div
+</script>
+ +

Примеры

+ +

Выбор первого элемента с совпадающим классом

+ +

В этом примере, нам вернется первый элемент в документе с классом "myclass":

+ +
var el = document.querySelector(".myclass");
+
+ +

Более сложный селектор

+ +

Селекторы, передаваемые в querySelector, могут быть использованы и для точного поиска, как показано в примере ниже. В данном примере возвращается элемент <input name="login"/>, находящийся в <div class="user-panel main">:

+ +
var el = document.querySelector("div.user-panel.main input[name=login]");
+
+ +

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

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 2")}}
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}Изначальное определение
+ +

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

+ + + +

{{Compat("api.Document.querySelector")}}

+ +

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

+ + -- cgit v1.2.3-54-g00ecf