JavascriptclassName属性仅更新备用列表项

html5 • • 问答

我尝试了以下代码：

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>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>

pre>.cc {
background-color: blue;
}

.cd {
background-color: chartreuse;
}< 

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>

pre>.cc {
background-color: blue;
}

.cd {
background-color: chartreuse;
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>

回答

问题

.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"; 
}

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";
}

现代解决方案

使用.forEach()代替for循环。

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

以上是JavascriptclassName属性仅更新备用列表项的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容