快捷導(dǎo)航

解讀document.querySelector()方法

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

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

獲取文檔中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() 方法僅僅返回匹配指定選擇器的第一個(gè)元素。如果你需要返回所有的元素，請(qǐng)使用 querySelectorAll() 方法替代。

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

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

獲取第一個(gè)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>

獲取文檔中的第一個(gè)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” 的第一個(gè)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>

獲取第一個(gè)帶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>

多個(gè)選擇器的使用方法

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

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

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

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