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>

这仅更新备用列表项，而不是所有具有相同类的列表项。我想知道为什么这样不起作用。

- Gaurav Mandhyan

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>

循环如何运作：

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>

- Miu

---

谢谢您的编辑，Xaniff。您的解释比我的原始解释好多了。 - Miu

Answer 2

这里是解决方案。你可以在这里找到解释：如何使用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>

- Mike