如何通过数组对HTML多个元素批量执行setAttribute操作

错误原因 #

你代码中allSec数组存储的是字符串格式的元素ID，不是DOM元素对象，字符串本身没有setAttribute方法才会抛出类型错误。
之前直接写1Sec.setAttribute可以正常运行，是因为浏览器默认会把页面中带id属性的DOM元素挂载到window全局对象上，你可以直接用id作为变量名调用到对应的DOM元素。

修正代码 #

你只需要在遍历ID的时候，通过ID获取到对应的DOM元素再操作属性即可，还可以顺带补充保留元素的显示逻辑，避免重复操作：

const hideOthers = (keepSecId) => {
  const allSecIds = ["1Sec", "2Sec", "3Sec", "4Sec", "5Sec", "6Sec", "7Sec"];
  allSecIds.forEach(secId => {
    const secElement = document.getElementById(secId);
    if (secId !== keepSecId) {
      secElement.setAttribute("hidden", true);
    } else {
      // 保证要保留的元素处于显示状态
      secElement.removeAttribute("hidden");
    }
  })
};

调用方法示例：需要保留id为1Sec的元素时，执行hideOthers("1Sec")即可。

更灵活的优化方案 #

如果后续可能新增/删除需要控制的section，你可以给所有需要参与显隐控制的section加一个统一的类名，比如switch-section，就不需要手动维护ID数组了：

const hideOthers = (keepSecId) => {
  // 直接获取所有需要控制的section元素
  const allSec = document.querySelectorAll('.switch-section');
  allSec.forEach(sec => {
    sec.id === keepSecId ? sec.removeAttribute("hidden") : sec.setAttribute("hidden", true);
  })
};

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