javascript - JavaScript 中的 For 循环缺少值

Question

我是 javascript 新手，正在学习数组和循环。我正在编写一些基本代码来更改某些段落的类，但我无法这样做。 谁能告诉我我做错了什么？

function change() {
  var x = document.getElementsByClassName('a');
  x[0].className = 'b';
  for (var y = 0; y < x.length; y++) {
    console.log(x[y]);
    x[y].className = "b";
  }
}

p.a {
  font-size: 2em;
  color: red;
  text-align: center;
}

p.b {
  font-size: 1em;
  color: green;
  text-align: center;
}

<p class='a'>a</p>
<p class='a'> b</p>
<p class='a'>c</p>
<p class='a'>a</p>
<p class='a'>b</p>
<p class='a'>c</p>
<p class='a'>a</p>
<p class='a'>b</p>
<p class='a'>c</p>

<button onclick="change()">Change</button>

事实证明，有些段落正在更改，有些则没有，谁能告诉我我做错了什么吗？

Answer 1

document.getElementsByClassName() 是一个实时集合，这意味着当您循环遍历元素并更改类时，您正在更改集合。在迭代集合时更改集合的成员资格几乎总是一个坏主意。这会使您的索引指向错误的元素。最简单的解决方案是使用 querySelectorAll() 代替。

function change() {
  var x = document.querySelectorAll('.a');
  for (var y = 0; y < x.length; y++) {
    x[y].className = "b";
  }
}

p.a {
  font-size: 2em;
  color: red;
  text-align: center;
}

p.b {
  font-size: 1em;
  color: green;
  text-align: center;
}

<p class='a'>a</p>
<p class='a'> b</p>
<p class='a'>c</p>
<p class='a'>a</p>
<p class='a'>b</p>
<p class='a'>c</p>
<p class='a'>a</p>
<p class='a'>b</p>
<p class='a'>c</p>

<button onclick="change()">Change</button>