前端js通过选择器获取标签

钱端攻城狮

于 2022-03-19 17:58:53 发布

阅读量1k

点赞数

分类专栏： js 文章标签： javascript 开发语言前端 css

本文链接：https://blog.csdn.net/m0_54932975/article/details/123599418

版权

CSS选择器 JavaScript DOM操作 querySelector querySelectorAll

关键词由CSDN通过智能技术生成

js 专栏收录该内容

86 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<div id="one"></div>
		<div class="c1"></div>
		<h1 class="c1"></h1>
		<a href="###">哈哈哈哈</a>
		<div class="box">
			<a href="###">京东</a>
			<a href="###">淘宝</a>
		</div>
	</body>
</html>
<script type="text/javascript">
	//通过css选择器获取标签
	//1.获取所有符合条件的标签,所以返回值是数组
	//标签选择器
	var divArray=document.querySelectorAll("div");
	console.log(divArray);
	//class选择器
	var c1Array=document.querySelectorAll(".c1");
	console.log(c1Array);
	//后代选择器
	var aArray=document.querySelectorAll(".box a:first-child");
	console.log(aArray);
	//2.只获取符合条件的第一个标签
	//所以返回值就是具体的标签对象
	var a=document.querySelector(".box a");
	console.log(a);
	var one=document.querySelector("#one");
	console.log(one);
</script>