Javascript CSS动画-类列表仅更改第一个实例

我正在尝试将动画应用于同一类的多个元素。whiteKey。以下代码仅将其添加到元素的第一个实例中。为什么会这样

document.querySelector('.whiteKey').classList.add('keysAnimate');

&HTML：

<button class="whiteKey"></button>
<button class="whiteKey"></button>
<button class="whiteKey"></button>

仅返回与dom中匹配的第一个元素。你需要的是

然后你会做一些类似的事情

const elements=document.querySelectorAll.whiteKey； elements.forEachelement=>element.classList.add'KeyAnimate' 仅返回与dom中匹配的第一个元素。你需要的是

然后你会做一些类似的事情

const elements=document.querySelectorAll.whiteKey； elements.forEachelement=>element.classList.add'KeyAnimate' querySelector仅选择具有该id/类的第一个元素。您需要使用querySelectorAll选择按钮，然后使用循环遍历它们

HTML:

JS:

querySelector仅选择具有该id/类的第一个元素。您需要使用querySelectorAll选择按钮，然后使用循环遍历它们

HTML:

JS:

---

如其他答案所述，您应该使用然后您应该循环所有结果节点，您可以使用循环它们并将类添加到类列表中，下面是一个工作片段：

让whiteKey=document.querySelectorAll.whiteKey'； whiteKeys.forEachel=>{ 添加'keysAnimate'； }; .keysAnimate{ 边框：1px纯红； } 按钮1 按钮2

---

按钮3如其他答案所述，您应该使用然后您应该循环所有结果节点，您可以使用循环它们并将类添加到类列表中，下面是一个工作片段：

让whiteKey=document.querySelectorAll.whiteKey'； whiteKeys.forEachel=>{ 添加'keysAnimate'； }; .keysAnimate{ 边框：1px纯红； } 按钮1 按钮2

---

button 3感谢@iamcastelli的评论，但我在另一个线程中看到它后尝试过，但它不起作用。我的更新代码：document.queryselectoral.whiteKey.classList.add'keysAnimate'；控制台中的错误：索引：77 Uncaught TypeError:无法读取HtmlButtoneElement处未定义的属性“add”。index:77querySelectorAll返回一个节点列表，而不是单个节点。是的，然后他们必须对其进行迭代。感谢@iamcastelli的评论，但我在另一个线程中看到它后尝试了这一点，但它不起作用。我的更新代码：document.queryselectoral.whiteKey.classList.add'keysAnimate'；控制台中的错误：索引：77 Uncaught TypeError:无法读取HtmlButtoneElement处未定义的属性“add”。索引：77querySelectorAll返回一个节点列表，而不是一个节点。是的，然后他们必须迭代它。

<button class="whiteKey"></button>
<button class="whiteKey"></button>
<button class="whiteKey"></button>

var buttons = document.querySelectorAll(".whiteKey");
for(var i = 0; i < buttons.length; i++) {
  buttons[i].classList.add('keysAnimate');
}