优先使用children、缓存长度、querySelectorAll配合forEach、利用事件委托，可有效减少DOM查询与重排重绘，提升遍历效率和页面响应性能。
在进行 DOM 操作时，高效地遍历元素是提升前端性能的关键环节。直接操作或频繁查询节点容易造成页面卡顿，尤其在处理大量元素时更为明显。掌握合理的遍历方法，能显著减少重排（reflow）和重绘（repaint），让交互更流畅。
使用 children 代替 childNodes
当需要遍历某个容器的子元素时，优先使用 children 而不是 childNodes。
- children 只包含元素节点（Element Nodes），过滤掉文本、注释等非元素节点。
- childNodes 包含所有类型的节点，遍历时需额外判断类型，效率较低。
示例：
const container = document.getElementById('list');for (let i = 0; i console.log(container.children[i]);
}
缓存集合长度，避免重复查询
使用 getElementsByTagName 或 getElementsByClassName 返回的是类数组动态集合，每次访问 length 都会重新计算。
- 在循环前缓存长度，防止重复计算。
- 若遍历过程中会修改 DOM，缓存可避免因集合动态变化导致的跳项或死循环。
正确做法：
const items = document.getElementsByClassName('item');for (let i = 0, len = items.length; i items[i].style.color = 'blue';
}
优先使用 querySelectorAll + forEach
querySelectorAll 返回静态 NodeList，适合现代开发习惯。
- 结果不会随 DOM 变化而动态更新，行为更可预测。
- 支持 forEach 方法，代码更简洁清晰。
推荐写法：
document.querySelectorAll('.card').forEach(card => {card.addEventListener('click', handleCardClick);
});
利用事件委托减少遍历
当为多个子元素绑定相同事件时，不必逐个遍历添加监听器。
例如：
document.getElementById('menu').addEventListener('click', e => {if (e.target.matches('a.menu-item')) {
handleMenuClick(e.target);
}
});
基本上就这些。合理选择遍历方式，避免不必要的 DOM 查询和操作，就能在大多数场景下保持良好的响应性能。
