Document.querySelector()

Возвращает первый элемент внутри документа (используется предупорядоченный обход узлов в глубину до первого найденного узла), который совпадает с определенной группой селекторов.

Синтаксис

element = document.querySelector(selectors);

где

• element — объект element.  
• selectors — строка, содержащая один или более CSS селекторов, разделённых запятой.

Пример

В этом примере, нам вернется первый элемент в документе с классом "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]");

Примечания

Возвращается null, если нет найденых совпадений; в ином случае, нам вернется первый найденный элемент.

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

Если селекторы не корректны, выбрасывается исключение SYNTAX_ERR.

querySelector() был представлен в Selectors API.

Строка передаваемых аргументов в querySelector должна соответствовать синтаксису CSS.

CSS псевдо-классы никогда не вернут каких-либо элементов, как и определено в Selectors API

Для совпавшего ID или селектора, который не соответствует CSS синтаксу (к примеру, используя запятую или пробельный символ ненадёжным образом), вы должны экранировать символ обратной косой чертой (\). Так как обратная косая черта — это экранирующий символ в JavaScript, её нужно экранировать дважды (т.е. первый раз для экранирования строки JavaScript, второй раз для querySelector).

<div id="foo\bar"></div>
<div id="foo:bar"></div>

<script>
  console.log('#foo\bar')               // "#fooar"
  document.querySelector('#foo\bar')    // Ничего не найдено


  console.log('#foo\\bar')              // "#foo\bar"
  console.log('#foo\\\\bar')            // "#foo\\bar"
  document.querySelector('#foo\\\\bar') // Найден в первом div'e

  document.querySelector('#foo:bar') // Ничего не найдено
  document.querySelector('#foo\\:bar') // Найдено во втором div'е
</script>

Specifications

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

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

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