Document.querySelector()

Синтаксис

element = document.querySelector(selectors);

Параметры

селекторы

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

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

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

Если вам нужен список всех элементов, соответствующих указанным селекторам, используйте функцию 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]");

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

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

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

• Locating DOM elements using selectors
• document.querySelectorAll()
• element.querySelector()
• element.querySelectorAll()
• Фрагменты кода для querySelector