使用 foreach 方法遍历 queryselectorall 返回的 nodelist。现代浏览器中该集合已支持迭代协议，可直接调用 .foreach(callback) 进行遍历，无需转换为数组。

为什么 forEach 能直接用在 NodeList 上

因为新版规范将 NodeList 定义为实现了 Iterable 接口的对象，所以它继承了 Array.prototype.forEach 的行为逻辑，可以直接对每个节点执行回调函数。

const items = document.querySelectorAll('.item');
items.forEach((node, index) => {
  console.log(index, node.textContent);
});

如何兼容旧版浏览器的 NodeList

在 IE 等不支持 forEach 的旧环境中，需借助 Array.from 或展开运算符将其转为真正的数组后再遍历，从而获得完整的数组方法支持。

JavaScript 开发专家

掌握包含 ES6+、异步模式和 Node.js API 的现代 JavaScript。处理 Promise、事件循环和浏览器/Node 兼容性。在 JavaSc

下载

立即学习“Java免费学习笔记（深入）”；

// 方式一：Array.from
Array.from(document.querySelectorAll('.item')).forEach(...);

// 方式二：展开运算符
[...document.querySelectorAll('.item')].forEach(...);

遍历过程中修改 DOM 会导致什么结果

如果在回调中删除了当前被选中的元素，后续索引对应的节点可能会发生位移，导致跳过某些元素或抛出错误，因此建议从后往前遍历或使用临时副本。