Для цикла в JavaScript отсутствует значение

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>