求助：如何让类添加/移除函数作用于所有同ID元素

问题描述 #

我编写的添加/移除类的函数仅能作用于ID为“sineDelay”的第一个元素，无法对所有该ID的元素生效。希望点击按钮时，该函数能作用于所有ID为“sineDelay”的元素，恳请帮忙，谢谢:) 相关函数代码如下：

function $delSinSlowTight() { 
  var element = document.getElementById("sineDelay"); 
  element.classList.remove("delSinMedTight"); 
  element.classList.add("delSinSlowTight"); 
}
function $delSinMedTight() { 
  var element = document.getElementById("sineDelay"); 
  // 原代码未完成，推测逻辑为移除对应类并添加delSinMedTight
}

问题根源 #

首先要明确：在HTML规范中，ID属性是全局唯一的，一个页面内不应该存在多个相同ID的元素。而document.getElementById()的设计逻辑就是仅返回匹配到的第一个元素，这就是你的函数只能作用于第一个元素的核心原因。

解决方案 #

下面提供两种方案，优先推荐符合规范的写法：

方案1：规范写法（推荐） #

最稳妥的方式是修正HTML结构，把重复的sineDelayID改为类名（比如将<div id="sineDelay">改成<div class="sineDelay">），然后通过类选择器来获取所有目标元素：

function $delSinSlowTight() { 
  // 获取所有class为sineDelay的元素
  const elements = document.querySelectorAll(".sineDelay"); 
  // 遍历每个元素执行类操作
  elements.forEach(element => {
    element.classList.remove("delSinMedTight"); 
    element.classList.add("delSinSlowTight"); 
  });
}

function $delSinMedTight() { 
  const elements = document.querySelectorAll(".sineDelay"); 
  elements.forEach(element => {
    element.classList.remove("delSinSlowTight"); 
    element.classList.add("delSinMedTight"); 
  });
}

方案2：适配现有重复ID的情况（不推荐） #

如果暂时无法修改HTML结构，也可以用querySelectorAll选择所有匹配重复ID的元素，再逐个处理：

function $delSinSlowTight() { 
  // 获取所有ID为sineDelay的元素（即使重复也能全部选中）
  const elements = document.querySelectorAll("#sineDelay"); 
  elements.forEach(element => {
    element.classList.remove("delSinMedTight"); 
    element.classList.add("delSinSlowTight"); 
  });
}

function $delSinMedTight() { 
  const elements = document.querySelectorAll("#sineDelay"); 
  elements.forEach(element => {
    element.classList.remove("delSinSlowTight"); 
    element.classList.add("delSinMedTight"); 
  });
}

补充提示 #

• querySelectorAll返回的是NodeList对象，现代浏览器支持用forEach遍历；如果需要兼容老旧浏览器，可以改用for循环：

  for (let i = 0; i < elements.length; i++) {
    const element = elements[i];
    // 执行类操作
  }
  

• 再次强调：重复ID违反HTML规范，可能导致样式冲突、JS选择异常等问题，建议优先采用方案1修正结构。

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