queryselectorall 返回静态 nodelist，非 array，故无 map/filter 等方法；推荐用扩展运算符或 array.from() 转数组，避免 slice.call；处理海量 dom 时应批量读写、前置过滤、预提取子元素、分片防阻塞。
querySelectorAll 返回的是静态 NodeList，不能直接调用数组方法（如 map、filter、forEach），但可以轻松转为真数组再高效处理海量 DOM 元素。
为什么不能直接用数组方法？
querySelectorAll 返回的是 NodeList，不是 Array。虽然现代浏览器中部分 NodeList 支持 forEach，但它没有 map、filter、reduce、find 等方法，且在旧环境（如 IE）或某些上下文（如 Shadow DOM 中的 NodeList）中 forEach 也不可用。强行调用会报错：nodeList.map is not a function。
三种可靠转数组方式（推荐前两种）
✅ 推荐：扩展运算符（最简洁、可读性强）
const buttons = [...document.querySelectorAll('button')];- 适用于大多数现代项目，语法干净，语义明确
- 注意：不支持 IE，若需兼容请选其他方式
✅ 兼容性最佳：Array.from()
const inputs = Array.from(document.querySelectorAll('input[type="text"]'));- 支持所有 ES6+ 环境，包括 IE11（需引入 polyfill 或 babel 转译）
- 还能顺便做映射转换：
Array.from(nodes, el => el.dataset.id)
⚠️ 不推荐：Array.prototype.slice.call()
const items = Array.prototype.slice.call(document.querySelectorAll('.item'));- ES5 时代常用，但冗长、不易理解，已基本被前两者替代
处理海量 DOM 的实用技巧
当匹配成百上千个元素时，避免重复遍历和高频 DOM 操作：
- 批量读取 + 单次写入：先用 map 提取所有需要的数据（如 value、offsetTop），再统一更新状态或生成新结构，减少重排重绘
-
条件过滤前置：用 filter 精简集合后再操作，比如
buttons.filter(btn => !btn.disabled).forEach(clickHandler) -
避免在循环中查 DOM：不要在 map/forEach 里反复调用
el.querySelector；可提前用el.matches('.valid')判断，或用Array.from(el.children)预提取 -
大列表考虑分片处理：用
for循环配合setTimeout或requestIdleCallback防止主线程阻塞（例如每 20 个处理一次）
真实场景示例：收集表单字段并校验
假设页面有 500 个 input，需找出所有必填但为空的字段并高亮：
const requiredFields = Array.from(
document.querySelectorAll('input[required], select[required], textarea[required]')
);
const emptyRequired = requiredFields
.filter(el => el.value.trim() === '' && !el.hasAttribute('disabled'))
.map(el => {
el.classList.add('error');
return { name: el.name, type: el.type };
});
console.log(`发现 ${emptyRequired.length} 个未填写的必填项`);
这里一次性转数组、一次过滤、一次映射，逻辑清晰，性能可控。
