快捷導航

解讀document.querySelector()方法

更新時間：2023年03月01日 10:18:41 作者：黃寶康

這篇文章主要介紹了document.querySelector()方法的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

獲取文檔中id="container"的元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<div id="contatiner">huang</div>
	<script type="text/javascript">
		var destination = document.querySelector("#contatiner");
		console.log(destination);
	</script>
</body>
</html>

注意：

querySelector() 方法僅僅返回匹配指定選擇器的第一個元素。如果你需要返回所有的元素，請使用 querySelectorAll() 方法替代。

參數(shù)類型可以為如下：

指定一個或多個匹配元素的 CSS 選擇器。可以使用它們的 id, 類, 類型, 屬性, 屬性值等來選取元素。
對于多個選擇器，使用逗號隔開，返回一個匹配的元素。

獲取第一個p元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<p>張露露，我愛你</p>
	<p>黃寶康，我也愛你</p>

	<script type="text/javascript">
	var node = document.querySelector("p");
		console.log(node);
	</script>
</body>
</html>

獲取文檔中的第一個class="lover"的元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<span class="lover">張露露</span>
	<span class="lover">黃寶康</span>

	<script type="text/javascript">
	var node = document.querySelector(".lover");
		console.log(node);
	</script>
</body>
</html>

獲取class=“lover” 的第一個p元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<span class="lover">張露露</span>
	<p class="lover">黃寶康</p>

	<script type="text/javascript">
	var node = document.querySelector("p.lover");
		console.log(node);
	</script>
</body>
</html>

獲取第一個帶target屬性的a元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<a >百度一下</a>
	<a  target="_blank">淘寶一下</a>

	<script type="text/javascript">
	var node = document.querySelector("a[target]");
		console.log(node);
	</script>
</body>
</html>

多個選擇器的使用方法

以下代碼將為文檔的第一個 <h2> 元素添加背景顏色：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<h2>二級標題</h2>
	<h3>三級標題</h3>
	<script type="text/javascript">
		document.querySelector("h2,h3").style.backgroundColor = "blue";
	</script>
</body>
</html>

但是，如果文檔中 <h3> 元素位于 <h2> 元素之前，<h3> 元素將會被設(shè)置指定的背景顏色。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<h3>三級標題</h3>
	<h2>二級標題</h2>
	
	<script type="text/javascript">
		document.querySelector("h2,h3").style.backgroundColor = "blue";
	</script>
</body>
</html>