Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

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

Спецификация Статус Комментарий
Selectors API Level 2
Определение 'document.querySelector()' в этой спецификации.
Рабочий черновик  
Selectors API Level 1
Определение 'document.querySelector()' в этой спецификации.
Рекомендация Изначальное определение

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

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1 3.5 (1.9.1)
баг 416317
8 10 3.2 (525.3)
Баг WebKit 16587
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 yes 9 10.0 3.2

 

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

Метки документа и участники

 Внесли вклад в эту страницу: SlavaJan, bychek.ru, Geraldus, fscholz, khalid32, thisninja
 Обновлялась последний раз: SlavaJan,