JavaScript метод ParentNode.querySelector()

Определение и применение

JavaScript метод .querySelector() объекта ParentNode возвращает первый элемент (объект Element) с текущим элементом в качестве корневого, соответствующий указанному селектору, или группе селекторов, которые являются потомками объекта, на котором был вызван метод. Если совпадений не найдено, то возвращается значение null.

Этот метод так же реализован как Document.querySelector(), DocumentFragment.querySelector() и Element.querySelector().

Обращаю Ваше внимание на то, что не допускается использование CSS псевдоэлементов в качестве значения селектора для поиска элементов, в этом случае в качестве возвращаемого значения всегда будет значение null.

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

Метод querySelector() также определен в объекте Element, по этой причине он может быть вызван на любом элементе, не только на объекте Document, или ParentNode. Элемент на котором он вызывается будет использован в качестве корневого элемента для поиска.

Поддержка браузерами

Метод	Chrome	Firefox	Opera	Safari	IExplorer	Edge
`ParentNode.querySelector()`	Да	Да	Да	Да	8.0*	Да

JavaScript синтаксис:

parentNode.querySelector( selectors )

selectors - String

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

Selectors API Level 1

Значения параметров

Параметр	Описание
selectors	Аргумент должен соответствовать допустимой строке селектора, содержащей один или несколько селекторов. При указании нескольких селекторов необходимо разделять значения запятыми. В этом случае будет выбран первый найденный элемент из заданных селекторов. Если по какой-то причине вы используете в наименовании селекторов символы, которые не являются частью стандартного синтаксиса CSS, то при поиске такие символы должны быть экранированы с помощью символа обратной косой черты ("\"). Поскольку обратная косая черта также является специальным символом (escape) в JavaScript, то при вводе литеральной строки ее необходимо экранировать дважды. Обязательный параметр.

Параметр

Описание

selectors

Аргумент должен соответствовать допустимой строке селектора, содержащей один или несколько селекторов. При указании нескольких селекторов необходимо разделять значения запятыми. В этом случае будет выбран первый найденный элемент из заданных селекторов.
Если по какой-то причине вы используете в наименовании селекторов символы, которые не являются частью стандартного синтаксиса CSS, то при поиске такие символы должны быть экранированы с помощью символа обратной косой черты ("\"). Поскольку обратная косая черта также является специальным символом (escape) в JavaScript, то при вводе литеральной строки ее необходимо экранировать дважды. Обязательный параметр.

Исключения

Тип исключения	Описание
SYNTAX_ERR	Возникает в том случае, если синтаксис указанного селектора или селекторов некорректен.

Пример использования

const activeElement = document.querySelector( ".first, .block" ) // находим первый элемент из заданных селекторов в документе
                                                               .querySelector( ".active" );          // находим первый элемент с классом active внутри выбранного элемента

Более подробную практическую информацию Вы можете получить в описании метода querySelector() объекта Document.

JavaScript ParentNode