如何快速更新Javascript中许多元素的类？

我在一个页面上有几千个元素，只要按下一个按钮，它们的CSS类就会改变。 目前我有如下js代码：

for each (var id in list) {
    var element = document.querySelector('[data-id="' + id + ']');
    element.className = 'myClass';
}

在IE中，这几乎需要20秒。我做了一些分析，看起来.className操作只需要半毫秒；加上垃圾收集，这就是它花费这么长时间的原因。我不确定.className是否导致回流

---

无论如何，我怎样才能比现在更快地完成这项任务呢？

我会让CSS完成所有的艰苦工作

只要有某种类型的父对象，向它添加一个类，并使CSS以它为目标

例如

document.querySelector（“按钮”）.onclick=function（）{
document.body.classList.toggle（“单击按钮”）；
}

[数据id]{
背景颜色：黄色；
}
.点击按钮[数据id]{
背景颜色：粉红色；
}

1
两个
三
四
五
单击我

对于每个？它似乎已被弃用。替换为for（x of y）It never existedIt是在Javascript 1.6中引入的，不知道它什么时候被弃用：哦，对了，它从来都不是语言的一部分，我很惊讶它居然出现在规范中我真的很喜欢这个答案，但是，如果不清楚的话，我很抱歉，我真的需要每个元素都有自己的类。这是因为每个元素都可以通过不同的操作进行切换。好的，更新了答案，也可以使用分离的DOM方法进行切换。嘿，Keith，我真的很感谢你再次尝试。这个解决方案在Chrome中的一秒钟内就可以工作，这很好。但不幸的是，在IE中，我不知道需要多长时间，因为几分钟后我放弃了（尝试了几次）。应该注意的是，单击“RunCodeSnippet”并创建初始列表是快速的，不管怎样，它都是切换类按钮。事实上，在我的产品代码中，我使用一个分离的div创建了这个结构，它工作得很快，我甚至尝试重新创建div并将其附加到DOM，而不是更新类名，但无论出于什么原因，它都比较慢。我不明白。是的，这很奇怪。。不幸的是，我没有IE11，我在Win10上，它没有安装，。。但在边缘奔跑仍然是超快的。嗯。。你可以试着从100个div开始，首先看看它是否有效，10000个div可能是IE11无法破解的。