Vanilla JavaScript向元素添加类

Question

我想使用纯JS向某些元素添加类，并且熟悉选择带有ID的元素，但是当我尝试使用getElementsByClassName时，我的代码就中断了。是否无法通过类名称获取元素并添加新的类？

我知道以下代码可以工作，但是再次想通过className定位元素。

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

Answer 1

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

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

Answer 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>