如何使用getElementsByClassName调用同一类的多个元素？

Question

令人沮丧。

我目前正在练习，我想添加一个类并在div上删除另一个类为“ sap”的类。我有3个div具有相同的类，并且我打算使用循环来获取具有相同类的所有元素，但是它似乎无法正常工作，我也不知道为什么。

我仅使用香草JS。

有人可以帮我吗？感谢您提供的任何帮助。

HTML：

<button onclick="boot()">show</button>
<div class=panel>
<div id="container" class="sap">
  <div class="content"><span>unveil</span></div>
<div class="smooth">
</div>
</div>
<div class="sap">
  <div class="content"><span>unveil</span></div>
<div class="smooth">
</div>
</div>
<div class="sap">
  <div class="content"><span>unveil</span></div>
<div class="smooth">
</div>
</div>
</div>

JS：

function boot(){
  for(var i=0;i<=3;i++){
      var box=document.getElementsByClassName("sap");
    if(box[i].classList.contains("content")){
       box[i].classList.add("flush");
       }}
  }

Answer 1

您需要首先获得sap类的dom的第一个孩子

function boot() {
  var box = document.getElementsByClassName("sap");
  for (var i = 0; i < box.length; i++) {
    const firstChild = box[i].children[0]
    if (firstChild.classList.contains("content")) {
      firstChild.classList.add("flush");
    }
  }
}

.sap {
  border: 1px solid red;
}

.content {
  color: green;
}

.flush {
  font-size: 20px;
  color: blue;
}

<button onclick="boot()">show</button>
<div class=panel>
  <div id="container" class="sap">
    <div class="content"><span>unveil</span></div>
    <div class="smooth">
    </div>
  </div>
  <div class="sap">
    <div class="content"><span>unveil</span></div>
    <div class="smooth">
    </div>
  </div>
  <div class="sap">
    <div class="content"><span>unveil</span></div>
    <div class="smooth">
    </div>
  </div>
</div>