document.querySelector()用法

document.querySelector

GHUIJS

49317人浏览 · 2021-02-23 09:48:48

GHUIJS · 2021-02-23 09:48:48 发布

不久前，我发现了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>