JavaScript метод document.querySelector()

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

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

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

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

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

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

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

JavaScript синтаксис:

document.querySelector( selectors )

selectors - String

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

Selectors API Level 1

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

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

Параметр

Описание

selectors

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

Исключения

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

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование JavaScript метода document.querySelector()</title>
	</head>
	<body>
		<button onclick = "myFunc()">Нажми меня</button> <!-- добавляем атрибут событий onclick -->
		<div class = "block first">Первый блок</div>
		<div class = "block">Второй блок</div>
		<div class = "block">Третий блок</div>
		<script>
	function myFunc() {
	  let firstBlock = document.querySelector( ".block" ),   // выбираем элемент с классом block
	      first = document.querySelector( ".first, .block" ), // находим первый элемент из заданных селекторов
	      second = document.querySelector( "div:nth-of-type(2)" ), // выбираем каждый элемент div, который является вторым дочерним элементом своего родительского элемента
	      third = document.querySelector( "div:last-of-type" ); // находим каждый элемент div, который является последним из элементов своего родительского элемента

	  firstBlock.style.background = "black";    // изменяем цвет заднего фона у элемента
	  first.style.color = "red";    // изменяем цвет текста у элемента
	  second.style.color = "green"; // изменяем цвет текста у элемента
	  third.style.color = "blue";   // изменяем цвет текста у элемента		
	  	  }
		</script>
	</body>
</html>

В этом примере мы с использованием атрибута событий onclick при нажатии на кнопку (HTML элемент <button>) вызываем функцию myFunc(), которая с использованием JavaScript метода document.querySelector() выбирает следующие элементы:

Первый элемент с классом block в документа и устанавливаем черный цвет заднего фона найденному элементу.
Первый элемент из заданных селекторов (элемент с классом first, элемент с классом block) и устанавливаем красный цвет текста найденному элементу. В этом случае будет выбран первый найденный элемент из заданных селекторов.
Элемент <div>, который является вторым дочерним элементом своего родительского элемента и устанавливаем найденному элементу зеленый цвет текста.
Элемент <div>, который является последним из элементов своего родительского элемента и устанавливаем найденному элементу синий цвет текста.

Результат нашего примера:

Пример использования JavaScript метода document.querySelector()

JavaScript Document