Javascript getElementsByClassName遍历数组

我正在学习Javascript，我似乎不明白为什么下面的代码不起作用。它将改变第一段的背景，但不会改变第二段的背景。当我检查控制台时，access变量似乎只向数组返回一项。有什么建议吗？谢谢

HTML

Javascript:

var access = document.getElementsByClassName("blue");
for(var i = 0; i<access.length; i++){
access[i].className = "orange";
}

var access=document.getElementsByClassName（“蓝色”）；
对于（var i=0；i您将获得一个活动节点列表，这意味着集合将随着DOM的更改而更新

在循环中更改类名时，一个元素不再与选择器
.blue
匹配，并且长度突然变为
1
而不是
2
，因此循环在到达第二个元素之前结束

当在活动节点列表上迭代时，通常应反向迭代

var access = document.getElementsByClassName("blue");

for (var i = access.length - 1; i > -1; i--) {
    access[i].className = "orange";
}

或者您可以使用一种方法来获取非活动节点列表，例如
document.queryselectoral（'.blue'）
使用
document.queryselectoral（'.blue'））
相反。它不会像
getElementsByClassName
那样返回活动节点列表，您也不会遇到这个问题。感谢您帮助我理解这一点。我使用querySelectorAll（'.blue'）使它起作用，并尝试了您的其他建议。我无法使它起作用：var access2=document.querySelectorAll（“.blue”）；例如（var i=0；i@trustIsEarned-删除句点，它应该是
access2[i]。className=“orange”
var access = document.getElementsByClassName("blue");
for(var i = 0; i<access.length; i++){
access[i].className = "orange";
}

var access = document.getElementsByClassName("blue");

for (var i = access.length - 1; i > -1; i--) {
    access[i].className = "orange";
}