querySelectorAll 返回静态 NodeList，创建后不随 DOM 变动更新；遍历应用 for 或 for...of，转数组推荐 Array.from；其元素引用仍为实时节点，但 NodeList 本身不可修改。
querySelectorAll 返回的是静态 NodeList，不是实时更新的
直接调用 document.querySelectorAll('selector') 得到的就是静态 NodeList —— 它在创建那一刻就“拍下快照”，后续 DOM 变动（如新增、删除、修改匹配元素）不会影响这个列表。这点和 document.getElementsByTagName 返回的动态 HTMLCollection 截然不同。
常见误解是以为它会自动刷新，结果在插入新元素后还拿旧列表遍历，导致漏处理。确认是否静态，可以做个小验证：
const list = document.querySelectorAll('div');
console.log(list.length); // 比如 3
document.body.insertAdjacentHTML('beforeend', '<div></div>');
console.log(list.length); // 仍是 3，没变
遍历静态 NodeList 要用 for 或 for...of，别用 for...in
NodeList 是类数组对象，有 length 和数字索引，但没有 forEach（老版本 IE 不支持，虽现代浏览器已普遍支持，但兼容性仍需留意）。更稳妥的做法是用传统 for 循环。
- ✅ 推荐：
for (let i = 0; i - ✅ 现代写法（需确认目标环境支持）：
nodeList.forEach(el => {...}) - ❌ 避免：
for (let i in nodeList)—— 会遍历原型链上的属性（如item方法），引发意外行为
想转成真数组？Array.from 比 slice 更安全
需要调用 map、filter 等数组方法时，得先转成数组。虽然 [].slice.call(nodeList) 曾经常用，但它在某些浏览器（如旧版 Safari）中对 NodeList 失效。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
Array.from(nodeList) 是标准、可靠的选择，且语义清晰：
const divs = document.querySelectorAll('div');
const arr = Array.from(divs); // ✅ 安全转数组
arr.map(el => el.textContent.trim());
注意：如果 NodeList 来自 ShadowRoot（比如 Web Components 内部），Array.from 同样适用，而 slice 可能报错。
静态 NodeList 的 length 和索引访问是只读的，不能 push/pop
它不是数组，也没有 push、pop、splice 等方法。试图修改会静默失败或抛错（取决于浏览器）。
如果你需要动态维护一组元素引用，得自己用 Array 存储：
let refs = Array.from(document.querySelectorAll('button'));
refs.push(newBtn); // ✅ 自己的数组可操作
// 而 document.querySelectorAll('button') 始终不变
容易忽略的一点：静态 NodeList 的「静态」仅指内容快照，其内部每个节点引用仍是活的——你改 nodeList[0].textContent，DOM 上立刻可见变化。
