如何优化多次调用querySelectorAll的ECMAScript代码？

嘿，你这段代码的核心问题是重复调用querySelectorAll——每次调用都会重新遍历DOM查找元素，既浪费性能又冗余。咱们可以用以下几种方式优化：

方案1：先缓存查询结果，再遍历处理（可读性最佳） #

先一次性获取所有目标元素，存到变量里，再逐个移除类名：

const shadowBoxes = document.querySelectorAll('main .testimonials ul.shadow-box');
shadowBoxes.forEach(box => box.classList.remove('shadow-box'));

这种写法清晰直观，性能也更好，因为DOM查询只执行一次。

方案2：合并成一行代码（简洁紧凑） #

如果想要一行搞定，直接把查询和遍历合并就行，同样只执行一次DOM查询：

document.querySelectorAll('main .testimonials ul.shadow-box').forEach(box => box.classList.remove('shadow-box'));

额外说明：关于处理顺序 #

你原来的代码是按索引2→1→0的倒序处理，但其实移除类名的顺序不影响最终结果。如果确实需要严格倒序处理，可以把NodeList转成数组后反转再遍历：

[...document.querySelectorAll('main .testimonials ul.shadow-box')].reverse().forEach(box => box.classList.remove('shadow-box'));

内容的提问来源于stack exchange，提问作者klewis