querySelectorAll()与querySelector()

在前端开发当中，经常会使用JS来对页面进行操作，我们可以使用querySelectorAll()与querySelector()来对获取指定的DOM元素，从而对其进行操作。

（一）querySelector()

querySelector()是一个属于document对象的一个方法，因此我们使用querySelector()的时候需要在使用document来进行引出。它接受一个CSS选择器来作为参数 如:（id,class,*,各种标签等），它的返回值只是返回符合该选择器的第一个元素，如果没有找到符合的那么他将返回null。

        <div id="app">
			<span class="One">
				你好
			</span>
			<div class="One">
				哈哈
			</div>
			<p class="Two">
				不好
			</p>
		</div>
		<script>
			let a=document.querySelector('#app')//可以获取到id为app的元素
			console.log(a)
			let b=document.querySelector('.One')//可以获取到class为One的元素
			console.log(b)
			let c=document.querySelector('p')//获取到<p>标签的元素
			console.log(c)
			let d=document.querySelector('a')//获取到<a>标签的元素
			console.log(d)
		</script>

我们可以看到let b它只获取了class为One的第一个元素 ,并没有获取到它的另一个class为One的元素，这也就是querySelector()它的返回值只是返回符合该选择器的第一个元素,并且我们获取的<a>标签它显示的是为null。

(二) querySelectorAll()

querySelectorAll()与querySelector()都是用来获取DOM元素的，不同的是querySelectorAll()的返回值会返回符合该选择器的所有元素。

        <div id="app">
			<span class="One">
				你好
			</span>
			<div class="One">
				哈哈
			</div>
			<p class="Two">
				不好
			</p>
		</div>
		<script>
			let a=document.querySelectorAll('.One')//获取class为One的所有DOM元素
			console.log(a)
			console.log(a[0]);
			console.log(a[1]);
		</script>

可以看到我们获取了class为One的所有元素，需要值得注意的是它返回的是一个NodeList对象，NodeList对象是一个静态的，也就意味着它不会自动更新数据，且我们需要使用数组的形式或者循环遍历来得到下一级的元素。