querySelectorAll 返回的是 NodeList 而非数组，它是静态快照、不响应 DOM 变化，且无 map/forEach 方法（旧浏览器），需用 Array.from 或 for 循环遍历。
querySelectorAll 返回的是数组吗？
不是，querySelectorAll 返回的是 NodeList，不是 Array。它看起来像数组（有 length、支持 [i] 访问），但不能直接用 map、forEach（老版本 Safari/IE 中甚至没有 forEach 方法）。常见错误是写 document.querySelectorAll('button').map(...)，然后报 TypeError: undefined is not a function。
解决办法：转成真数组，或用兼容性更好的遍历方式：
const buttons = document.querySelectorAll('button');
<p>// ✅ 推荐：用 Array.from（现代浏览器 & Node.js 环境都 OK）
Array.from(buttons).forEach(btn => btn.addEventListener('click', handler));</p><p>// ✅ 兼容性更广：用 for 循环（无额外开销，不依赖 ES6）
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', handler);
}</p><p>// ❌ 不要直接调用 map/forEach（除非你已确认 NodeList.forEach 可用且不需要兼容旧环境）选择器写错导致什么也选不到？
querySelectorAll 对选择器语法非常严格，写错一个字符就返回空 NodeList（length === 0），不会报错，容易误以为 DOM 没加载完或元素不存在。
立即学习“前端免费学习笔记（深入）”；
常见低级但高频的错误：
- 类名漏写点：
querySelectorAll('my-class')→ 应为querySelectorAll('.my-class') - ID 漏写井号：
querySelectorAll(myId)→ 应为querySelectorAll('#myId') - 属性选择器值没加引号：
querySelectorAll('[data-type=header]')→ 若值含特殊字符（如空格、点、中括号），必须加引号：querySelectorAll('[data-type="main-header"]') - 伪类拼写错误：
:first-child有效，:firstchild或:firstChild（大小写敏感）无效
为什么动态插入的元素查不到？
querySelectorAll 只查询**当前时刻** DOM 树中存在的匹配元素，它不监听变化。如果你在 JS 中用 innerHTML 或 appendChild 新增了元素，必须在插入后**重新调用** querySelectorAll 才能拿到它们。
典型误区场景：
const list = document.querySelector('#list');
list.innerHTML = '<li class="item">A</li><li class="item">B</li>';
<p>const items = document.querySelectorAll('.item'); // ✅ 此时能拿到 2 个
list.innerHTML += '<li class="item">C</li>';
console.log(items.length); // ❌ 还是 2 —— items 是快照，不会自动更新</p><p>// ✅ 正确做法：需要时重新查
const updatedItems = document.querySelectorAll('.item'); // length === 3如果频繁增删，建议封装一个函数，或改用事件委托（如监听 #list 的 click，再用 e.target.matches('.item') 判断）。
性能和作用域：别在 document 上盲目查全页
全局查 document.querySelectorAll('.tooltip') 在大型页面中可能慢，尤其选择器复杂或 DOM 深度大。更高效的做法是限定作用域：
- 从某个容器查起：
container.querySelectorAll('.tooltip')，比全页查快得多 - 避免通配符和过度嵌套：
div ul li a[title]比a[title]多做几层匹配，能简则简 - 如果只取第一个，用
querySelector替代querySelectorAll(...)[0]，它内部可提前终止遍历
另外注意：CSS 选择器优先级不影响 querySelectorAll 结果，它只管是否匹配，不管样式是否生效或被覆盖。
真正难的不是写对语法，而是记住它返回的是静态快照、不响应式、也不自动转换类型——这些特性在调试时最容易被忽略。
