This page was translated from English by the community.Learn more and join the MDN Web Docs community.
Document.querySelector()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..
Document методquerySelector() возвращает первый элемент (Element) документа, который соответствует указанному селектору или группе селекторов. Если совпадений не найдено, возвращает значениеnull.
Примечание:Сопоставление выполняется с использованием обхода по предварительному порядку в глубину узлов документа, начиная с первого элемента в разметке документа и повторяя последовательные узлы по порядку количества дочерних узлов.
Синтаксис
element = document.querySelector(selectors);Параметры
- селекторы
DOMString, содержащий один или более селекторов для сопоставления. Эта строка должна быть допустимой строкой селектора CSS; если же нет, генерируется исключениеSYNTAX_ERR. СмотритеРасположение элементов DOM с использованием селекторов для того, чтобы узнать больше о селекторах и о том, как ими управлять.
Примечание:Символы, которые не являются частью стандартного синтаксиса CSS должны быть экранированы символом обратной косой черты. Поскольку JavaScript также использует экранирование символом обратной косой черты, будьте особенно внимательны при написании строковых литералов с использованием этих символов. См.Escaping special characters для получения дополнительной информации.
Возвращаемое значение
Ссылка на объект типаElement, являющийся первым элементов в документе, который соответствует указанному наборуCSS селекторов, либоnull, если совпадений нет.
Если вам нужен список всех элементов, соответствующих указанным селекторам, используйте функциюquerySelectorAll().
Исключения
SYNTAX_ERRНекорректный синтаксис указанных селекторовselectors.
Примечания по использованию
Если указанный селектор соответствует идентификатору, который неправильно используется более одного раза в документе, возвращается первый элемент с этим идентификатором.
Псевдо-элементы CSS никогда не вернут никаких элементов, как указано вAPI селекторов.
Экранирование специальных символов
Чтобы сопоставить ID или селекторы, которые не соответствуют стандартному синтаксису CSS (например, использующих ненадлежащим образом двоеточие или пробел), необходимо экранировать символ обратной косой чертой ("\"). Поскольку обратная косая черта также является экранирующим символом в JavaScript, то при вводе литеральной строки необходимо экранировать еёдважды (первый раз для строки JavaScript и второй дляquerySelector()):
<div></div><div></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>:
var el = document.querySelector("div.user-panel.main input[name=login]");Спецификации
| Specification |
|---|
| DOM # ref-for-dom-parentnode-queryselector① |