JS：尝试从对象数组中删除css类只会删除其中的一半

Question

我的html中有几个DOM元素，类“high”，我希望得到所有带有“high”类的元素并从中删除它，我已经尝试过了（我正在使用Chrome的控制台来测试代码）：

var check= document.getElementsByClassName("high");
for(var k = 0; k < check.length; k++){
    check[k].classList.remove("high");
}

但问题是它似乎只从数组中的一半元素中删除了类并停止。如果我事后console.log(check);我可以看到数组已删除了一半的元素。但是，这似乎有效：

var check= document.getElementsByClassName("high");
while(check.length > 0){
    check[0].classList.remove("high");
}

我希望第一个代码可以工作，但是现在第二个代码正常工作，我不确切知道这是怎么发生以及为什么会这样。

解决

该问题得到了回答，但对于那些有兴趣看到这个问题的人来说：

Here's A Fiddle

Answer 1

document.getElementsByClassName会返回一个实时HTML集合，当您迭代集合并更改其中一些集合时，这会导致问题。

请改用document.querySelectorAll('.high')。它返回一个静态节点列表，你不会遇到这个问题。

More information on HTML collections/node lists

Answer 2

这确实很合乎逻辑：

让我们想象下面的数组

[0, 1, 2, 3]

首先删除0-th项，这会给你

[1, 2, 3]

然后，第二步删除1-st项（这里是2），这样就可以了

[1, 3]

你停在那里，你不应该在删除时增加索引，因为所有剩余的元素都会向左移动。而且你只删除了一半的项目。