如何更改特定类名的所有类名元素

Question

如何更改特定类名的所有类名元素？

我的意思是，假设我有 3 个带有“MyClass”类的 div，我想在 JavaScript 中将它们的类名更改为“notMyClass”，该怎么做？

<div class="MyClass">
</div>
<div class="MyClass">
</div>
<div class="MyClass">
</div>

<!--TO-->

<div class="notMyClass">
</div>
<div class="notMyClass">
</div>
<div class="notMyClass">
</div>

我知道通过元素的id调用元素很容易，但是如何通过它的类名呢？

Answer 1

使用querySelectorAll 选择所有具有MyClass 类的元素，然后循环遍历每个元素（使用NodeList.forEach）并使用classList.replace：

document.querySelectorAll('.MyClass').forEach(e => e.classList.replace('MyClass', 'notMyClass'))

.notMyClass{
  background-color:green;
}

<div class="MyClass">A</div><div class="MyClass">B</div><div class="MyClass">C</div>

<!--TO-->

<div class="notMyClass">D</div><div class="notMyClass">E</div><div class="notMyClass">F</div>

Answer 2

使用querySelectorAll方法：

Array.from(document.querySelectorAll('.MyClass')).forEach(elem => {
  elem.className = 'otherClass';
});

请注意，我使用了Array.from，因为 querySelectorAll 返回的是 NodeList，而不是数组。