Блог

Главная - JavaScript язык программирования - HTML DOM querySelector() Method
You are currently viewing HTML DOM querySelector() Method

HTML DOM querySelector() Method

Метод querySelector() в HTML используется для возврата первого элемента, который соответствует заданным CSS-селекторам в документе.

Примечание: Метод querySelector() возвращает только первый элемент, соответствующий указанным селекторам. Чтобы вернуть все совпадения, используйте метод querySelectorAll ().

Синтаксис:

element.querySelector(selectors);

Селекторы — это обязательное поле. Он определяет один или несколько селекторов CSS для соответствия элементу. Эти селекторы используются для выбора HTML-элементов на основе их идентификатора, классов, типов и т.д. В случае нескольких селекторов для разделения каждого селектора используется запятая. Элемент, который появляется первым в документе, является возвращаемым элементом. Если селектор соответствует идентификатору( который должен быть уникальным на каждой странице), который используется несколько раз в документе, он вернет первый соответствующий элемент.

Возвращаемое значение : Этот метод используется для возврата первого элемента, соответствующего указанному(им) селектору (селекторам) CSS в документе.

Пример: 

В этом примере описывается использование DOM Селектор запросов() метод выбора самого первого соответствующего элемента для конкретного селектора.

<!DOCTYPE html>
<html>

<head>
	<title>DOM querySelector() Method</title>
</head>

<body style="text-align: center;">
	<h1 style="color: green;">GeeksforGeeks</h1>
	<h2>querySelector() Method</h2>
	<div id="gfg">
		
<p>This is paragraph 1.</p>

		
<p>This is paragraph 2.</p>

	</div>
	<button onclick="myFunction()">Try it</button>
	<script>
	function myFunction() {
		var x = document.getElementById("gfg");
		x.querySelector("p").style.backgroundColor = "Green";
		x.querySelector("p").style.color = "white";
	}
	</script>
</body>

</html>

Выход:

Поддерживаемые браузеры: Браузер, поддерживаемый querySelector():

  • Google Chrome 4.0
  • Internet Explorer 8.0
  • Microsoft Edge
  • Firefox 3.5
  • Opera 10.0
  • Safari 3.2
Метки: