DOM类切换报错解决：container-fluid深色模式切换问题

错误原因 #

document.getElementsByClassName() 返回的是HTMLCollection（类数组对象），而非单个DOM元素。这个集合本身没有 classList 属性，直接调用 .classList.toggle() 自然会抛出「Cannot read properties of undefined」的错误。

解决方案 #

根据页面中 container-fluid 元素的数量，选择对应的实现方式：

情况1：页面只有一个 container-fluid 元素

使用 document.querySelector() 获取单个匹配元素（推荐），或者通过索引从集合中取第一个元素：

function DarkModeToggle() {
    // querySelector 返回第一个匹配的元素
    const element = document.querySelector(".container-fluid");
    // 先判断元素是否存在，避免找不到时触发新错误
    if (element) {
        element.classList.toggle("dark-mode");
    }
}

情况2：页面有多个 container-fluid 元素，需要批量切换

将类数组对象转为数组后遍历，或使用 document.querySelectorAll()（返回可直接遍历的NodeList）：

function DarkModeToggle() {
    // 方式1：处理 getElementsByClassName 返回的 HTMLCollection
    const elements = document.getElementsByClassName("container-fluid");
    Array.from(elements).forEach(el => el.classList.toggle("dark-mode"));

    // 方式2：用 querySelectorAll 更简洁
    // const elements = document.querySelectorAll(".container-fluid");
    // elements.forEach(el => el.classList.toggle("dark-mode"));
}

额外注意事项 #

• 确保脚本在DOM加载完成后执行：可以把JS代码放在HTML的 <body> 末尾，或者用 DOMContentLoaded 事件包裹函数，避免因元素未加载导致 element 为 null。
• 检查按钮的 onclick 绑定是否正确，确保函数名拼写一致（注意大小写，比如 DarkModeToggle 和 darkModeToggle 是不同的）。

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