Javascript className 属性仅更新备用列表项

Question

我尝试了以下代码:

var a = document.getElementsByClassName("cc");
for (var i = 0; i < a.length; i++) {
  a[i].className = "cd";
}

.cc {
  background-color: blue;
}

.cd {
  background-color: chartreuse;
}

<ul>
  <li class="cc">A</li>
  <li class="cc">B</li>
  <li class="cc">C</li>
  <li class="cd">D</li>
</ul>

这只会更新备用列表项，并非所有项都具有相同的类。我想知道这不起作用的原因。

Answer 1

问题.getElementsByClassName()导致问题。见下文。

var a = document.getElementsByClassName("cc");
for (var i = 0; i < a.length; i++) {
  console.log(`----- Loop ${i} -----`);
  // Current HTML collection
  console.log(a);
  // Target element
  console.log(`Target: ${a[i].textContent}`);
  a[i].className = "cd"; 
}

<ul>
  <li class="cc">A</li>
  <li class="cc">B</li>
  <li class="cc">C</li>
  <li class="cd">D</li>
</ul>

你的 for 循环是如何工作的:

a = [A, B ,C]

a[0] = A -> A.className = 'cd'

a = [B, C]

a[1] = C -> C.className = 'cd'

a = [B]

a[2] = undefined -> 循环结束

解决方案
使用.querySelectorAll()而不是 .getElementsByClassName() .
前者产生一个静态集合，后者是 dynamic (这意味着当您更新 DOM 时，集合本身也会更新)。

var a = document.querySelectorAll(".cc");
for (var i = 0; i < a.length; i++) {
  a[i].className = "cd";
}

.cc {
  background-color: blue;
}

.cd {
  background-color: chartreuse;
}

<ul>
  <li class="cc">A</li>
  <li class="cc">B</li>
  <li class="cc">C</li>
  <li class="cd">D</li>
</ul>

现代解决方案
使用.forEach()而不是 for环形。

const a = document.querySelectorAll('.cc');
a.forEach(element => element.className = 'cd');

.cc {
  background-color: blue;
}

.cd {
  background-color: chartreuse;
}

<ul>
  <li class="cc">A</li>
  <li class="cc">B</li>
  <li class="cc">C</li>
  <li class="cd">D</li>
</ul>