暗色模式切换开发问题：forEach循环仅为首个同ID元素添加类的修复方案咨询

嘿，这个问题我之前也踩过坑！核心原因很明确：HTML规范里要求ID属性必须是页面唯一的，浏览器提供的document.getElementById()方法本身就只会返回第一个匹配该ID的元素——这就是为什么你只有第一个同ID元素生效，后面的都没反应的原因。

最规范的修复方案（推荐） #

我们先把HTML里重复的ID改成类（这是符合标准的做法，能避免后续更多潜在问题），再调整JavaScript代码来选中所有目标元素：

1. 修改HTML代码 #

把重复的id替换成统一的类名，比如：

<h1 class="h1 h1-target">COLOR</h1> <!-- 原id="h1" -->
<h1 class="h1 h2-target">COLOR</h1> <!-- 原id="h2" -->
<h1 class="h1 h3-target">COLOR</h1> <!-- 原id="h3" -->
<h1 class="h1 h1-target">COLOR</h1> <!-- 原id="h1" -->
<h1 class="h1 h2-target">COLOR</h1> <!-- 原id="h2" -->
<h1 class="h1 h3-target">COLOR</h1> <!-- 原id="h3" -->
<button onclick="darkSwitch()">CHANGE COLOR</button>

2. 调整JavaScript代码 #

• 把darkClasses数组里的elementId改成elementSelector，用类选择器来定位元素
• 遍历的时候用document.querySelectorAll()获取所有匹配元素，再逐个操作类名

修改后的JS代码：

// 检查Cookie是否存在
var cookieState = Cookies.get('darkMode');
var isDarkmodeEnabled = cookieState ? JSON.parse(cookieState) : false;
var darkMode = isDarkmodeEnabled;

// 存储暗色模式类名与对应元素选择器
var darkClasses = [
  { className: 'h1dark', elementSelector: '.h1-target'},
  { className: 'h2dark', elementSelector: '.h3-target'},
  { className: 'h3dark', elementSelector: '.h2-target'},
];

// 页面加载时，若暗色模式已启用则添加类
window.onload = addClassesOnLoad; // 注意这里不要加()，否则会立即执行

// 切换暗色模式状态，添加或移除类
function darkSwitch() {
  darkMode = !darkMode;
  darkClasses.forEach(item => {
    // 获取所有匹配的元素
    const elements = document.querySelectorAll(item.elementSelector);
    // 遍历每个元素添加/移除类
    elements.forEach(el => {
      if(darkMode) {
        el.classList.add(item.className);
      } else {
        el.classList.remove(item.className);
      }
    });
  });
  // 将darkMode状态保存到Cookie
  Cookies.set('darkMode', darkMode);
}

// 页面加载时，若暗色模式已启用则添加类
function addClassesOnLoad() {
  if(darkMode){
    darkClasses.forEach(item =>{
      const elements = document.querySelectorAll(item.elementSelector);
      elements.forEach(el => el.classList.add(item.className));
    });
  };
}

临时应急方案（不推荐长期使用） #

如果暂时不想修改HTML结构（虽然强烈建议遵循规范），可以用属性选择器来选中所有相同ID的元素，比如把document.getElementById(item.elementId)改成document.querySelectorAll('[id="' + item.elementId + '"]')，但这种做法不符合HTML标准，可能会导致其他脚本或样式出现异常，只适合临时测试用。

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