document.getElementById()无法处理多元素，使用getElementsByClassName失效如何解决？

核心问题 #

document.getElementsByClassName("circle")返回的是HTMLCollection（类数组集合），包含所有匹配类名的DOM元素，而非单个元素。你直接对集合调用getAttribute、setAttribute等方法会报错——因为集合本身没有这些方法，只有单个DOM元素才有。

修复方案 #

需要遍历集合中的每个元素，逐个处理隐藏状态。以下是几种可行的写法：

写法1：使用for循环遍历HTMLCollection

let toggle = () => {
  let circles = document.getElementsByClassName("circle");
  // 遍历集合里的每一个元素
  for (let i = 0; i < circles.length; i++) {
    let circle = circles[i];
    let hidden = circle.getAttribute("hidden");

    if (hidden) {
      circle.removeAttribute("hidden");
    } else {
      circle.setAttribute("hidden", "hidden");
    }
  }
}

写法2：转成数组后用forEach遍历

let toggle = () => {
  // 将HTMLCollection转为数组，方便使用forEach方法
  let circles = Array.from(document.getElementsByClassName("circle"));
  circles.forEach(circle => {
    let hidden = circle.getAttribute("hidden");

    if (hidden) {
      circle.removeAttribute("hidden");
    } else {
      circle.setAttribute("hidden", "hidden");
    }
  });
}

写法3：简化布尔值切换（更简洁）

DOM元素的hidden属性本身是布尔类型，可以直接取反切换状态：

let toggle = () => {
  let circles = Array.from(document.getElementsByClassName("circle"));
  circles.forEach(circle => {
    // 直接切换hidden的布尔值，替代getAttribute/setAttribute操作
    circle.hidden = !circle.hidden;
  });
}

内容的提问来源于stack exchange，提问作者Theo