webapis_03

最新推荐文章于 2022-05-11 16:01:41 发布

一只追求学习的学渣

最新推荐文章于 2022-05-11 16:01:41 发布

阅读量124

点赞数

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44079801/article/details/106967713

版权

JS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>通过类选择器获取元素</title>
	</head>
	<body>
		//通过HTML5新增的方法获取适用于移动端，兼容性不好
		//1.document.getElementsByClassName('类名');//根据类名返回元素对象集合
		<div class="box">盒子</div>
		<div class="box">盒子</div>
		<div id = 'nav'>
			<ul>
				<li>首页</li>
				<li>产品</li>
			</ul>
			
		</div>
		<script>
			//1.getElementsByClassName根据类名获得某些元素集合(伪数组形式)
			var boxs = document.getElementsByClassName('box');
			console.log(boxs);
			//2.querySelector 返回指定选择器的第一个元素对象 里面的选择器需要加符号
			var firstBox = document.querySelector('.box');//类选择器用.表示
			console.log(firstBox);
			var nav = document.querySelector('#nav');//id选择器用#表示
			console.log(nav);//将id选择器中的内容取出来，用伪类表示
			var li = document.querySelector('li');//将第一个li中的内容取出来
			console.log(li);
			//3.quarySelectorAll()返回指定选择器的所有元素对象集合,里面的选择器需要加符号
			var allBox = document.querySelectorAll('.box');
			console.log(allBox);
			var lis = document.querySelectorAll('li');
			console.log(lis);
		</script>
	</body>
</html>

一只追求学习的学渣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webapis_03

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>通过类选择器获取元素</title> </head> <body> //通过HTML5新增的方法获取适用于移动端，兼容性不好 //1.document.getElementsByClassName('类名');//根据类名返回元素对象集合 <div class="
复制链接

扫一扫