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 循环的工作原理：

1. a = [A, B ,C]
2. a[0] = A -> A.className = 'cd'
3. a = [B, C]
4. a[1] = C -> C.className = 'cd'
5. a = [B]
6. a[2] = undefined -> 循环结束

解决方案

使用.querySelectorAll()代替.getElementsByClassName()。前者产生一个静态集合，后者是动态的（意味着当你更新 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>

Answer 2

这是解决方案。您可以在这里找到解释：How can I change an element's class with JavaScript?

var a = document.getElementsByClassName("cc");
while (a.length > 0) {
  a[0].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>