querySelectorAll 和querySelector区别

querySelectorAll和querySelector都是JavaScript中常用的DOM操作方法，它们的主要区别在于：
- querySelector只返回匹配到的第一个元素，而querySelectorAll则返回所有匹配到的元素。
- querySelectorAll返回的是一个类数组对象（NodeList），可以通过下标访问其中的元素，而querySelector只返回一个元素，直接访问即可。

举个例子来说，假设我们有以下HTML代码：

<ul id="list">
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
</ul>

如果我们想获取id为list的ul元素下所有class为item的li元素，可以使用以下代码：

// 使用 querySelectorAll
var items = document.querySelectorAll('#list .item');
console.log(items.length); // 输出 3

// 使用 querySelector
var item = document.querySelector('#list .item');
console.log(item.textContent); // 输出 "Item 1"

注意，querySelectorAll返回的是一个NodeList对象，虽然也可以使用forEach遍历其中的元素，但是它并不是真正的数组，如果需要使用数组方法，需要将其转换为数组。