JS for-in/forEach遍历NodeList设置DOM样式失效问题

• 第一版循环运行失败的原因：document.querySelectorAll('.false')返回的是NodeList类数组对象，不是普通数组。for-in循环遍历对象时拿到的是属性名（字符串类型的索引、以及NodeList自带的length、item等内置属性），不是DOM元素本身，直接对遍历值调用.style属性肯定会报错。
• 第二版改成objects[object]后正确选项无法变绿的原因：for-in会遍历对象所有可枚举属性，不止是索引位置的按钮元素，当遍历到非索引属性时，objects[object]拿到的不是DOM节点，访问.style会直接抛出JS运行错误，后续设置正确选项绿色背景的代码会被中断，根本不会执行。

方案1：forEach实现（最推荐） #

现代浏览器原生支持NodeList的forEach方法，遍历直接拿到每个DOM元素，不需要额外判断，逻辑最简洁，也不会出现遍历多余属性的问题。如果需要兼容IE等老旧环境，可以先用Array.from()把NodeList转成真数组再调用forEach。
完整修正后的核心JS代码如下：

document.addEventListener('DOMContentLoaded', function() {
    let falseBtns = document.querySelectorAll('.false');
    let correctBtn = document.querySelector('.correct');
    let tip1 = document.getElementById("tr1");

    // 正确选项点击逻辑
    correctBtn.addEventListener("click", function(){
        // 重置所有错误按钮背景
        falseBtns.forEach(btn => {
            btn.style.backgroundColor = "#d9edff";
        });
        tip1.innerHTML = "CORRECT!";
        correctBtn.style.backgroundColor = "green";
    });

    // 错误选项点击逻辑，替换原有的传统for循环
    falseBtns.forEach(btn => {
        btn.addEventListener("click", function(){
            correctBtn.style.backgroundColor = "#d9edff";
            btn.style.backgroundColor = "red";
            tip1.innerHTML = "FALSE!";
        })
    })

    // 填空题逻辑保持原有逻辑不变
    document.querySelector('.check').addEventListener("click", function(){
        let input = document.querySelector("input");
        let tip2 = document.getElementById("tr2");
        if(input.value.toLowerCase() == "cs50") {
            input.style.backgroundColor = "green";
            tip2.innerHTML = "CORRECT!";
        } else {
            input.style.backgroundColor = "red";
            tip2.innerHTML = "FALSE!";
        }
    })
});

方案2：for-in实现（需加合法性判断） #

如果一定要用for-in实现，必须在循环内判断当前属性是否为数字索引，跳过非元素属性，避免代码报错中断：

correctBtn.addEventListener("click", function(){
    for (let index in falseBtns) {
        // 只处理数字索引对应的DOM元素，跳过length、item等内置属性
        if(falseBtns.hasOwnProperty(index) && !isNaN(Number(index))) {
            falseBtns[index].style.backgroundColor = "#d9edff";
        }
    }
    tip1.innerHTML = "CORRECT!";
    correctBtn.style.backgroundColor = "green";
});

注意：for-in本身是设计用来遍历普通对象属性的，不推荐用来遍历数组/类数组，很容易因为遍历到原型链上的自定义属性引发异常，优先选择forEach方案。

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