暗黑模式切换异常：页面正常但btn-dark类按钮样式切换仅生效一次

两处代码缺陷完全匹配所有异常表现：

• 动态DOM集合引发遍历跳项：document.getElementsByClassName() 返回的是实时同步的HTMLCollection，不是固定快照的静态数组。遍历过程中只要修改了集合内元素的类名，集合就会立刻更新长度、调整元素索引，直接导致循环漏处理元素。
  举个具体的错位过程：初始3个按钮的集合索引为[按钮1, 按钮2, 按钮3]，i=0时处理按钮1，移除其btn-dark类后，动态集合立刻收缩为[按钮2, 按钮3]；随后i自增为1，此时循环访问的是集合索引1位置的按钮3，直接跳过了现在位于集合索引0位置的按钮2——这就是首次点击时第二个按钮无法生效的直接原因。
• 动态集合失效导致后续切换完全停滞：首次点击完成后，所有原带btn-dark的元素都被移除了对应类名，此时动态集合codeButton的长度会直接变为0；后续再次触发点击事件时，循环条件完全不满足，自然没有任何样式切换效果，表现为“类名切换逻辑仅能生效一次”。

核心改动只有一处：把动态获取的DOM集合转换为固定引用的静态数组，后续遍历、类名操作都基于这个固定数组执行，完全不受DOM类名变化的影响。原有的类名双向toggle逻辑可以直接保留，不需要额外复杂判断。

修复后的核心JS代码 #

let darkBackground = document.querySelector('body');
let darkModeBtn = document.getElementById('darkModeBtn');
let btnIcon = document.getElementById('btnIcon');
// 关键修复：将动态HTMLCollection转为固定静态数组，避免实时DOM同步干扰遍历
let codeButton = Array.from(document.getElementsByClassName('btn-dark'));

darkModeBtn.addEventListener('click', function() {
    darkBackground.classList.toggle('darkbackground');
    btnIcon.classList.toggle('fa-sun');
    btnIcon.classList.toggle('fa-moon');
    for (let i = 0, len = codeButton.length; len > i; i++) {
        codeButton[i].classList.toggle('btn-light');
        codeButton[i].classList.toggle('btn-dark');
    };
});

替代写法参考：也可以直接用返回静态NodeList的选择器获取按钮，效果完全一致：

// querySelectorAll 返回的NodeList为静态快照，不会随DOM变化实时更新
let codeButton = document.querySelectorAll('.btn-dark');

原有CSS、HTML代码不需要任何调整即可正常运行。

• 首次点击时，页面内所有深色按钮都会正常完成类名切换，无漏项
• 反复点击暗黑模式切换按钮，按钮样式会在btn-dark/btn-light之间稳定双向切换，不会出现单次失效的问题
• 整页暗黑模式切换、图标切换的原有逻辑不受任何影响

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