浅谈获取DOM元素的两种方式简介因为DOM的核心思想是把网页内容当做对象来处理，所以想要操作网页内容前首先要获取对应标

简介

因为DOM的核心思想是把网页内容当做对象来处理，所以想要操作网页内容前首先要获取对应标签的DOM对象，才能根据它提供的属性和方法来访问和操作网页内容。比较常见的两种方式是使用document.querySelector()和document.querySelectorAll()，它们都是通过CSS选择器来匹配对应的标签元素。

1. 选择匹配一个元素

使用document.querySelector('CSS选择器')可以获取CSS选择器匹配到的第一个元素，如果没有匹配到就返回null

<span>span</span>
<span>我也是span</span>
<script>
      //只会选中第一个span标签，所以只有第一个span标签颜色变红
      let myspan = document.querySelector('span')
      myspan.style.color = 'red'
</script>

2. 选择匹配多个元素

使用document.querySelectorAll('CSS选择器')可以获取CSS选择器匹配到的多个元素，这些元素都是放在NodeList对象集合里，如果没有匹配到也是会返回空的伪数组。注意：这个方法得到的是一个伪数组（哪怕里面只有一个元素或没有获取到元素也是伪数组），因此不能像使用正常数组API的数组方法，如：pop、push，只能使用.length的方法。想要得到里面的每个对象只能通过遍历来获得，然后再使用遍历得到的对象元素来操作属性和方法

<span>span</span>
<span>我也是span</span>
<script>
  let spans = document.querySelectorAll('span')
  // spans.push('a') 使用数组api会报错：push is not a function
  // 伪数组的操作需要遍历
  for (let i = 0; i < spans.length; i++) {
  console.log(spans[i])
  spans[i].style.color = 'red'
  }
</script>

3. 共同点

使用null的元素操作属性或方法会返回报错信息:Cannot read properties of null (reading 'style')。它们的小括号里都是写CSS选择器，而且必须是字符串，也必须加引号。