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

Posted 2023-03-05

【中文标题】如何更改特定类名的所有类名元素

【英文标题】：How to change all classname elements of specific classname

【发布时间】：2021-11-13 16:31:59

【问题描述】：

？

我的意思是，假设我有 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调用元素很容易，但是如何通过它的类名呢？

【问题讨论】：

高度相关：How can I change an element's class with JavaScript?。熟悉DOM API：querySelectorAll、NodeList、classList、DOMTokenList。使用Array.from。

【参考方案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>

【参考方案2】：

使用querySelectorAll方法：

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

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

【讨论】：

NodeList.prototype.forEach 可以在这里使用。

停止使用className，除非您从内存中创建全新的元素。使用最好的：developer.mozilla.org/en-US/docs/Web/API/Element/classList