JavaScript метод document.querySelector()

JavaScript Document

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

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


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


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

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

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

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

JavaScript синтаксис:

document.querySelector( selectors )

selectors - String

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

Selectors API Level 1

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

ПараметрОписание
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() выбирает следующие элементы:

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

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