浅谈获取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对象集合里，如果没有匹配到也是会返回null值。注意：这个方法得到的是一个伪数组（哪怕里面只有一个元素或没有获取到元素也是伪数组），因此不能像使用正常数组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，使用null的元素操作属性或方法会返回报错信息:Cannot read properties of null (reading 'style')。它们的小括号里都是写CSS选择器，而且必须是字符串，也必须加引号。
\
作者：涂鸦猫
链接：https://juejin.cn/post/7054174556533030943