Question

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

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";
}

Answer 1

您正在获得一个实时节点列表，这意味着该集合将随着DOM的更改而更新。

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

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

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

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

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

getElementsByClassName遍历数组

1 个答案: