Document.querySelector()

This article is in need of an editorial review.

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

Синтаксис

element = document.querySelector(selectors);

где

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

Пример

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

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

Примечания

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

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

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

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

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

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

Для совпавшего ID или селектора, который не соответствует CSS синтаксу (к примеру, используя запятую или пробельный символ ненадёжным образом), вы должны экранировать символ обратной косой чертой (\). Так как обратная косая черта — это экранирующий символ в ЯваСкрипте, её нужно экранировать дважды (т.е. первый раз для экранирования ЯваСкриптовой строки, второй раз для 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>

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

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 bug 16587
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 yes 9 10.0 3.2

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

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

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

Contributors to this page: Geraldus, fscholz, khalid32, thisninja
Обновлялась последний раз: Geraldus,
Скрыть боковую панель