通过类名获取元素后，如何操作类列表实现类的添加/移除/切换？

问题场景 #

我有多个类名为image1的图片元素，想要通过按钮触发，给这些元素添加/移除包含display:none;的hiddenclass类，以此实现图片的显示与隐藏。

最初尝试用document.getElementsByClassName("image1")获取元素后，直接像操作单个元素（比如getElementById返回的元素）那样调用elementImg.classList.toggle("hiddenclass")，但完全没效果——后来才意识到，getElementsByClassName返回的不是单个DOM元素，而是**HTMLCollection类型的元素集合**，没法直接对集合调用元素级的方法。

另外我了解到jQuery有.toggleClass()方法，但我不熟悉jQuery，也不确定它能不能直接处理多元素的类名切换需求。

解决代码 #

参考相关方案后，我通过将元素集合转换为数组，再遍历每个元素执行类名切换，成功解决了问题，代码如下：

Array.from(document.getElementsByClassName("image1"))
    .forEach((element) => element.classList.toggle("hiddenspan"));

注：代码中的hiddenspan应为问题描述中的hiddenclass，属于笔误，实际使用时需保持类名一致

内容的提问来源于stack exchange，提问作者HBB-ThinkTank