点击div切换样式：为何直接调用querySelectorAll移除样式失败？

• 核心问题：document.querySelectorAll() 返回的是NodeList（节点列表），这是一个包含多个DOM元素的类数组集合，而非单个DOM元素。classList 是单个DOM元素专属的属性，NodeList本身并没有这个属性，所以直接调用 .classList.remove() 必然失效。

• 循环可行的原因：当你遍历NodeList中的每一项时，每一项都是独立的DOM节点，这些节点各自拥有classList属性，对每个节点单独调用.remove()自然能正常移除样式类。

现代浏览器可直接用NodeList的forEach方法遍历：

// 移除其他div的border-blue-400类
document.querySelectorAll(':not([id^='+i+'])').forEach(el => {
  el.classList.remove('border-blue-400');
});

如果要兼容旧浏览器，可以先转成数组再操作：

// 转成数组后遍历
Array.from(document.querySelectorAll(':not([id^='+i+'])')).forEach(el => {
  el.classList.remove('border-blue-400');
});

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