querySelector()和querySelectorAll()

最新推荐文章于 2022-07-13 13:42:39 发布

LLL_LH

最新推荐文章于 2022-07-13 13:42:39 发布

阅读量457

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/LLL_liuhui/article/details/89383276

版权

js 专栏收录该内容

78 篇文章 1 订阅

订阅专栏

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。如果没有找到，返回 null。如果指定了非法选择器则报错。

querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的返回所有的元素。返回静态的NodeList 对象。NodeList 对象表示节点的集合。可以通过索引访问，索引值从 0 开始。如果没有找到，返回 []。如果在获得元素之后，元素内容改变了，那么querySelectorAll()获取不到这个改变

这两个选择器支持ie8+及主流浏览器

选择器可以是id, class, 类型, 属性, 属性值等来选取元素。对于多个选择器，使用逗号隔开，返回一个匹配的元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li>11111</li>
			<li class="two">22222</li>
			<li>333333</li>
			<li id="four"><span name="span1">44444</span></li>
			<li>555555</li>
			<li>666666</li>
		</ul>
		<script>
			let li = document.querySelector('li');
			console.log(li); 
			
			let twoLi = document.querySelector('.two');
			console.log(twoLi);
			
			let four = document.querySelector('#four');
			console.log(four);
			
			let span1 = document.querySelector('#four span[name="span1"]');
			console.log(span1);
		
			let allLi = document.querySelectorAll('li');
			console.log(allLi);
		</script>
	</body>
</html>

LLL_LH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
querySelector()和querySelectorAll()

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。如果没有找到，返回 null。如果指定了非法选择器则报错。querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的返回所有的元素。返回静态的NodeList 对象。NodeList 对象表示节点的集合。可以通过索引访问，索引值从 0 开始。如果没有找到，返回 []。如果在获得元素之后，元素内...
复制链接

扫一扫