HTML5 JavaScript中获取元素，筛选选择器(querySelector)

最新推荐文章于 2024-08-28 14:41:59 发布

houyanhua1

最新推荐文章于 2024-08-28 14:41:59 发布

阅读量7.5k

点赞数 1

分类专栏： HTML5 JavaScript 文章标签： html5 javascript

本文链接：https://blog.csdn.net/houyanhua1/article/details/79629671

版权

JavaScript 同时被 2 个专栏收录

140 篇文章 4 订阅

订阅专栏

HTML5

54 篇文章 1 订阅

订阅专栏

querySelector: 只能筛选出符合条件的第一个元素
querySelectorAll: 获取符合条件的所有元素,返回数组类型。

demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<style>
		.box {
			width: 300px;
			height: 100px;
			margin: 10px auto;
			border: 1px solid #000;
		}
	</style>

</head>
<body>
	<div class="box box1" id="boxId"></div>
	<div class="box box2"></div>
	<div class="box box3"></div>
	<div class="box box4"></div>

	<script>
		//var box1 = document.getElementById("boxId");  //html4传统的写法
		//var box1 = document.querySelector("div");    //通过标签选择。 html5通过querySelector筛选选择器。只能筛选出符合条件的第一个元素
		//var box1 = document.querySelector(".box1");  //通过类名选择， 只选择第一个符合条件的元素
		//var box1 = document.querySelector("#boxId");  //通过ID选择
		
		var boxs = document.querySelectorAll("div.box");  //获取符合条件的所有元素,返回数组类型。
		
		boxs[0].style.background="red";
	</script>
</body>
</html>