如何通过JavaScript高效更新DOM中批量带active类的LI元素？

首先纠正一个小问题：document.querySelectorAll('li')返回的是NodeList（类数组对象），它本身没有filter方法，你原来的代码会报错，需要先转成数组，比如用Array.from(listItems)或者[...listItems]。

更优的实现思路 #

你担心循环操作DOM影响性能，但其实classList.add是轻量级操作——现代浏览器会自动合并DOM重排重绘，几百个元素的操作基本不会有性能问题。不过我们可以通过精准选择目标元素进一步优化：

方案1：直接用CSS选择器定位目标元素

跳过“先选所有li再过滤”的步骤，直接用li.active选择器拿到所有带active类的列表项，浏览器的原生选择器引擎比JS循环过滤高效得多：

// 直接获取所有带active类的li元素
const activeLIs = document.querySelectorAll('li.active');
// 批量添加新类名
activeLIs.forEach(li => li.classList.add('new-class'));

方案2：批量操作的误区澄清

你提到“将元素存入数组再统一处理”，这里有个关键认知：DOM元素存入数组后，不需要“放回”容器。数组里存储的是DOM元素的引用，你修改数组中元素的类名、属性等，会直接反映到页面的DOM树上——这些元素本来就属于各自的容器节点，不存在“放回”的必要。

比如你转成数组操作的正确写法：

// 转成数组
const listItemsArr = Array.from(document.querySelectorAll('li'));
// 过滤出带active的元素
const activeLIs = listItemsArr.filter(item => item.classList.contains('active'));
// 批量加类，修改的就是原DOM元素
activeLIs.forEach(li => li.classList.add('new-class'));

关于性能的补充说明 #

如果真的遇到超大量元素（数千级），可以手动触发批量重排：比如先把目标元素从DOM中移除，修改类名后再插回去，但这种场景极少。对于几百个元素的情况，上面的方案完全足够，没必要过度优化。

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