JavaScript метод ParentNode.querySelector()

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

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

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

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

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

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

Спецификация: dom.spec.whatwg

Поддерживается во всех основных браузерах с 2015 года.

ВсеКомпьютерыМобильные

Совместимостьapi.Element.querySelector
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`querySelector`	✓1	✓12	✓3.5	✓10	✓3.1	✓18	✓4	✓10.1	✓2	✓1.0	✓4.4	✓2

поддерживается с ограничениями нет поддержки нет данных≤31 — не позднее версии 31

JavaScript синтаксис:

JavaScript

parentNode.querySelector( selectors )

selectors - String

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

Selectors API Level 1

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

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

Параметр

Описание

selectors

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

Исключения

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

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

JavaScript

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

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