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

这令人沮丧

我目前正在做一个练习，我想在一个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>

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");
       }}
  }

show
揭幕
揭幕
揭幕

JS:

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

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");
       }}
  }

函数启动（）{
对于（var i=0；i采用此
var box=document.getElementsByClassName（“sap”）
在循环之外。这将提供这个类的html元素集合
sap
。然后您将想要迭代这个集合，所以您不需要硬编码数字3。请注意，在您的代码中，您提供的代码是有效的，除了在同时，当您运行下面的代码段时，不会看到任何更改（不会向任何元素添加任何类）：


函数启动（）{
var-box=document.getElementsByClassName（“sap”）；
对于（变量i=0；i

.flush{
字体大小：粗体；
颜色：#09f；
}
show
揭幕
揭幕
揭幕
通常使用内联事件处理程序

您可以使用更现代的
文档。querySelectorAll
，将其（类似数组的）结果传播到
数组中，并对其执行所需的操作。或者，更简短的是，一次性选择all
.sap>.content
并执行该操作。例如：


document.addEventListener（“单击”，启动）；
功能启动（evt）{
// --------------------------------------------------------------------------------    
//就为了这个演示片段
[…document.queryselectoral（“.flush，.flush”）]
.forEach（elem=>
元素类列表。移除（“冲洗”、“冲洗”）；
// --------------------------------------------------------------------------------    
if（evt.target.dataset.action==“启动”）{
[…document.queryselectoral（“.sap”）]//所有div.sap
.forEach（elem=>
[…elem.queryselectoral（“.content”）]//在*div.sap中的所有div.content*
.forEach（内容=>
content.classList.add（“flush”））
}else if（evt.target.dataset.action==“bootAlt”）{
//一次性完成*div.sap中的所有div.content*
[…document.querySelectorAll（“.sap>.content”）]
.forEach（内容=>
content.classList.add（“Flushall”））
}
}
.flush{
颜色：红色；
背景颜色：黄色；
宽度：100px；
保证金：4倍；
填充：2px；
文本对齐：居中；
}
弗鲁沙先生{
颜色：白色；
背景颜色：棕色；
宽度：100px；
保证金：4倍；
填充：2px；
文本对齐：居中；
}
show
表演（备选）
揭幕
揭幕
揭幕
“在div上添加一个类并删除另一个类”您的代码没有任何逻辑来删除您提到的类？请详细说明预期的行为是什么？我分别为每个类附加了不同的css样式，但您在这里遇到的确切问题是什么？并且还向代码中添加了最小的css。您没有删除代码中的
sap
类，即使您已在问题描述中说明您的意图