JavaScript中document.querySelectorAll用法

document.querySelectorAll 是 JavaScript 中用于“查找页面元素”的核心语法之一，非常准确地说，它是一个 DOM 查询方法，用来“在网页中查找符合指定条件的元素”。

我们可以把它理解为：

🔍 “浏览器，请帮我找到页面上所有符合这个规则的元素”

---

✅ 简短回答：

是的，document.querySelectorAll 是 JavaScript 中用于查找页面元素的标准方法，属于 DOM（文档对象模型）操作 的一部分。

---

🧱 详细解析：document.querySelectorAll

1. 拆解语法

document.querySelectorAll('.dept-checkbox:checked')

部分	说明
document	表示整个网页（HTML 页面）
.querySelectorAll	是 document 提供的一个方法（函数），意思是“查找所有匹配的元素”
('.dept-checkbox:checked')	传给这个方法的参数，是一个 CSS 选择器字符串，告诉它“找什么”

---

2. 它返回什么？

• 返回一个 NodeList（可以理解为“类数组”），包含所有匹配该选择器的元素。
• 如果一个都没找到，返回空的 NodeList。
• 如果找到了，你可以用 .length 知道有多少个，或用 for 循环遍历它们。

✅ 示例：

var boxes = document.querySelectorAll('.dept-checkbox:checked');

console.log(boxes.length); // 输出：比如 3，表示有 3 个被选中的复选框

boxes.forEach(function(box) {
    console.log(box.value); // 打印每个选中复选框的 value（比如部门 ID）
});

---

3. 常见的 querySelectorAll 用法示例

代码	含义
document.querySelectorAll('input')	找所有 <input> 元素
document.querySelectorAll('.dept-checkbox')	找所有 class 为 dept-checkbox 的元素
document.querySelectorAll('#myButton')	找 id 为 myButton 的元素（虽然通常用 getElementById）
document.querySelectorAll('input[type="checkbox"]')	找所有 checkbox 类型的 input
document.querySelectorAll('.dept-checkbox:checked')	✅ 找所有被勾选的部门复选框（正是你代码中的用法）

---

🆚 相似方法对比

方法	作用	返回值
document.querySelectorAll(selector)	找所有匹配的元素	NodeList（多个）
document.querySelector(selector)	找第一个匹配的元素	单个元素（或 null）
document.getElementById('id')	找特定 id 的元素	单个元素（或 null）
document.getElementsByClassName('class')	找特定 class 的元素	HTMLCollection（动态）

✅ 推荐使用 querySelectorAll，因为它支持任何 CSS 选择器，非常灵活。

---

🎯 例句代码

var checkedBoxes = document.querySelectorAll('.dept-checkbox:checked');

这句话的意思是：

“请在页面上查找所有 class 为 'dept-checkbox' 并且当前被勾选（:checked）的复选框，把它们都给我。”

然后你就可以用 checkedBoxes.length 知道用户选了几个部门。

---

✅ 总结

问题	回答
document.querySelectorAll 是页面查找吗？	✅ 是的，它是 JavaScript 中最常用的页面元素查找方法之一
它属于什么？	DOM（文档对象模型）操作，是 JavaScript 操作网页的核心能力
怎么用？	传入一个 CSS 选择器字符串，比如 .class、#id、input:checked 等
返回什么？	一个包含所有匹配元素的列表（NodeList）

---

🧠 小知识：querySelectorAll 中的 All 就表示“所有”，如果你只想找第一个，可以用 querySelector。