Live2D 看板娘 / Demo

document.querySelector()用法

1、通过元素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>

2、通过元素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>

3、注意

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>

4、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>

 

posted @ 2022-06-24 15:35  小叶_Jiang  阅读(1028)  评论(0)    收藏  举报