使用Vanilla JS实现滚动切换Logo出现DOMException错误如何解决？

问题排查 #

你的代码存在2个核心语法错误，修正后即可正常运行：

• document.getElementsByClassName() 传参不符合要求，该API接收纯类名字符串，不需要加CSS选择器前缀.，你传入的.div-logo是错误写法，正确参数应为div-logo。
• getElementsByClassName 返回的是匹配所有类名的类数组集合（HTMLCollection），不是单个DOM元素，无法直接操作innerHTML属性，需要通过索引取到对应元素，比如第一个匹配元素取[0]。

你提到的Uncaught DOMException: Failed to execute 'add' on 'DOMTokenList'报错，是因为调用classList.add()时传入了DOM元素而非字符串类名，调整传参为纯类名字符串即可解决该问题。

修复方案 #

方案1：直接修复原有innerHTML逻辑

const bigLogo = `<img src="images/redsbaby.svg" alt="Logo" />`;
const smallLogo = `<img src="images/r.svg" alt="Logo" />`;

window.addEventListener("scroll", () => {
    const currentLocation = window.pageYOffset;
    // 修正选择器写法，取第一个匹配的logo容器
    const logoContainer = document.getElementsByClassName('div-logo')[0];
    if(currentLocation <= 0){
        logoContainer.innerHTML = smallLogo;
    } else {
        logoContainer.innerHTML = bigLogo;
    }
})

方案2：更优的类切换方案（性能更高，避免重复渲染图片）

不需要修改现有HTML结构，直接通过切换Tailwind的hidden类控制两个logo的显隐，无需重写DOM：

window.addEventListener("scroll", () => {
    const currentLocation = window.pageYOffset;
    const bigLogo = document.querySelector('.big-logo');
    const smallLogo = document.querySelector('.small-logo');
    if(currentLocation <= 0){
        // 滚动到顶部显示小logo
        bigLogo.classList.add('hidden');
        smallLogo.classList.remove('hidden');
    } else {
        // 滚动后显示大logo
        bigLogo.classList.remove('hidden');
        smallLogo.classList.add('hidden');
    }
})

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