Vanilla JavaScript向元素添加类[重复]答案

【问题标题】：Vanilla JavaScript adding classes to elements [duplicate]Vanilla JavaScript向元素添加类[重复]
【发布时间】：2018-08-13 16:09:09
【问题描述】：

我想使用纯 JS 向某些元素添加类，并且熟悉使用 ID 选择元素，但是当我尝试使用 getElementsByClassName 时，我的代码中断了。不可以通过类名获取元素并添加新类吗？

我知道下面的代码可以工作，但还是想通过 className 来定位元素。

document.getElementById("id-name").classList.add("new-class");

【问题讨论】：

【解决方案1】：

您可以使用 querySelectorAll 选择包含您的类的每个元素，然后在所有元素上添加您的新类：

document.querySelectorAll('.class-name')
        .forEach(element => element.classList.add('new-class'))

【讨论】：

请不要忽略这个问题.....Is it not possible to get elements by class name and add a new class?
?我不明白你的意思，他问他是否可以通过类名获取元素，所以......我想我的答案是正确的
嗯，我明白了。你说的对。但是，顺便说一句，我给了他一个比 getElementByClassname 更新的解决方案。哪个（在我看来）更容易阅读。

【解决方案2】：

难道不能通过类名获取元素并添加新类吗？

当然可以。 Document.getElementsByClassName() 返回具有所有给定类名的所有子元素的类数组对象。您必须迭代它们以添加类：

使用forEach()：

[...document.getElementsByClassName("myClass")].forEach(function(el){
  el.classList.add("new-class");
});

.new-class{
  color: red;
}

<div class="myClass">Test</div>
<div class="myClass">Test 2</div>
<div class="myClass">Test 3</div>

使用for 循环：

var elList = document.getElementsByClassName("myClass");
for(var i=0; i < elList.length; i++){
  elList[i].classList.add("new-class");
}

.new-class{
  color: red;
}

<div class="myClass">Test</div>
<div class="myClass">Test 2</div>
<div class="myClass">Test 3</div>

【讨论】：