Есть желание присоединиться к интересным IT проектам? Смотри открытые вакансии.

JavaScript метод Element.querySelector()

JavaScript Element

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

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

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


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


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

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

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

МетодChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
querySelector() ДаДаДаДа9.0Да

JavaScript синтаксис:

const element = baseElement.querySelector(selectors);

selectors - String

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

Document Object Model (DOM)

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

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

Исключения

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

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование JavaScript метода .querySelector() объекта Element</title>
	</head>
	<body>
		<button onclick = "myFunc()">Click me</button> <!-- добавляем атрибут событий onclick -->
		<div>
		        <ul>
		                <li>1</li>
		                <li>2</li>
		                <li>3</li>
		        </ul>
		</div>
		<script>
	function myFunc() {
	  const myDiv = document.body.querySelector( "div" ), // выбираем первый элемент <div> внутри элемента <body>
	        firstLi = myDiv.querySelector( "li" ); // выбираем первый элемент <li> внутри элемента <div>

	  firstLi.style.color = "orangered"; // устанавливаем элементу цвет текста		 
	}
		</script>
	</body>
</html>

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

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

Пример использования JavaScript метода .querySelector() объекта Element
Пример использования JavaScript метода .querySelector() объекта Element
JavaScript Element
×

Кажется, вы используете блокировщик рекламы :(

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

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.