document.querySelector()用法

最新推荐文章于 2025-03-31 16:44:58 发布

GHUIJS

最新推荐文章于 2025-03-31 16:44:58 发布

阅读量5w

点赞数 50

分类专栏： js

本文链接：https://blog.youkuaiyun.com/m0_43599959/article/details/113971556

版权

js 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了JavaScript中的document.querySelector和querySelectorAll方法。querySelector用于获取页面中匹配CSS选择器的第一个元素，而querySelectorAll则返回所有匹配的元素集合。通过示例代码，展示了如何根据ID、class和标签名来选取元素。需要注意的是，当有多个相同class或标签的元素时，querySelector仅返回第一个。总结了这两个方法在前端开发中的重要性和使用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不久前，我发现了document.querySelector JS选择器，语法类似JQuery。

通过元素id获取元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box"></div>
	</body>
	<script type="text/javascript">
		console.log(document.querySelector("#box"));
	</script>
</html>

通过元素class，标签名获取元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box" class="container"></div>
	</body>
	<script type="text/javascript">
		console.log(document.querySelector(".container"));
		console.log(document.querySelector("div"));
	</script>
</html>

注意：

document.querySelector用于获取单个元素，当页面中出现多个相同class标签(或者多个相同标签(比如多个div))时，只匹配第一个元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="box">第一个div</div>
		<div class="box">第二个div</div>
	</body>
	<script type="text/javascript">
		console.log(document.querySelector(".box"))
		console.log(document.querySelector("div"))
	</script>
</html>

document.querySelectorAll

那我们想获取多个元素就没办法了吗？有的。document.querySelectorAll就可以获取多个元素，它的结果跟document.getElementsByClassName()一样是一个集合。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="box">第一个div</div>
		<div class="box">第二个div</div>
	</body>
	<script type="text/javascript">
		console.log(document.querySelectorAll(".box"))
		console.log(document.querySelectorAll("div"))
	</script>
</html>