Question

问题在于：

将下面的3个div（它们不可见）更改为50x50红色正方形

<div class="empty"></div>
<div class="empty"></div>
<div class="empty"></div>

我们正在改编的课程内置：

<style media="screen">
  .red{
    width:50px;
    height:50px;
    background:red;
  }

此解决方案仅作用于第一个和最后一个div，将中间区分开：

let boxes = document.getElementsByClassName('empty');

function addThree(boxes) {
  for (let i = 0; i < boxes.length; i++) {
    boxes[i].className = 'red';
 }
}
addThree(boxes);

适用于所有三个div的解决方案;

let boxes = document.getElementsByClassName('empty');

function addThree(boxes) {
  for (let i = 0; i < boxes.length; i++) {
    boxes[i].classList.add('red');
 }
}
addThree(boxes);

不确定这里的区别是什么，如果有人能给出一个很棒的解释！

Answer 1

问题是document.getElementsByClassName('empty')返回live HTMLCollection。这意味着当DOM更改时它会自动更新。所以当你指定（你擦掉以前的课程empty）

时

boxes[0].className = 'red';

到之前为empty的第一个元素，集合boxes不再是3元素，但现在只有2个。

另一方面，boxes[i].classList.add('red')不会影响boxes集合长度，因为red类将添加添加到元素中（因此它变为{{ 1}} - 仍然empty red），不会覆盖以前的所有类。

Answer 2

您正在改变每个元素中间循环的类。所以，一旦你改变了第一个类，你的盒子数组的长度会缩短，并跳过第一个元素。

你想要添加“红色”类，或者如果你想改变它，首先将div推入另一个数组并迭代它

简单的DOM更改，非常奇怪的错误

2 个答案: