通过类名获取元素并遍历数组

Question

我正在学习JavaScript，但似乎无法弄清以下代码为什么不起作用。它会更改第一个段落的背景，但不是第二个。当我检查控制台时，看起来access变量只返回数组中的一个项目。有什么建议吗？谢谢。

HTML

<p class="blue">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
<p class = "blue">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>

CSS：

.blue{
background: blue;
}
.orange{
background:orange;
}

Javascript:

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

- trustIsEarned

---

请使用 document.querySelectorAll('.blue')。它不像 getElementsByClassName 一样返回一个实时节点列表，因此您不会遇到那个问题。 - Andy

Answer 1

你会得到一个动态nodeList，这意味着集合将随着DOM的变化而更新。

当你在循环内部更改类名时，一个元素不再匹配选择器.blue，长度突然变成了1而不是2，因此循环在到达第二个元素之前就结束了。

当迭代动态nodeList时，通常应该反向迭代。

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

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

或者你可以使用一种获取非实时nodeList的方法，比如 document.querySelectorAll('.blue')

- adeneo

---

谢谢帮我理解这个。我已经让它工作并尝试了你的另一个建议，使用querySelectorAll('.blue')。但我无法让它工作： var access2 = document.querySelectorAll(".blue"); for(var i = 0; i<access2.length; i++){ access2[i].className = ".orange"; } - trustIsEarned

@trustIsEarned - 去掉句号，应该是 access2[i].className = "orange"。 - adeneo