为何getElementById失效而querySelector生效？JS表单验证问题

我是JavaScript、HTML和CSS新手，制作简易问答网站时遇到一个问题：使用getElementById获取输入框元素后，用户输入与预期答案对比的验证逻辑完全失效；但将获取方式改为querySelector后，代码可正常运行。

代码预期目标：若用户输入匹配正确答案，输入框变绿色并显示“Correct!”；错误则变红色显示“Incorrect!”。

失效的JavaScript代码 #

let check = document.getElementById("userInput");
document.querySelector('#submit').addEventListener('click', function() {
    if(check.value == '26')
    {
        check.style.backgroundColor = 'green';
        document.querySelector('#feedback2').innerHTML = 'Correct!';
    }
    else
    {
        check.style.backgroundColor = 'red';
        document.querySelector('#feedback2').innerHTML = 'Incorrect!';
    }
})

对应的HTML代码 #

<h3>How many innings was the longest baseball game in MLB history</h3>
<input autocomplete="off" placeholder="Input" id="userInput" type="text">
<button id="submit">Submit</button>

仅将let check = document.getElementById("userInput");改为let check = document.querySelector('input');后代码正常，原因如下：

核心问题：DOM加载时机 #

你用getElementById获取元素的代码，大概率是在DOM还未完全加载完成时就执行了。此时浏览器还没渲染出id为userInput的输入框，getElementById会返回null。后续访问check.value时，因为check是null，会直接抛出错误，导致整个验证逻辑无法执行。

而换成querySelector('input')后看似正常，通常是两种巧合：

• 要么你的脚本位置发生了变化（比如移到了</body>标签之前，此时DOM已加载完成）；
• 要么页面中只有这一个input元素，且脚本执行时该元素已经被渲染出来。

验证与解决方法 #

临时验证方案

把获取元素的代码移到点击事件的回调函数内部，每次点击时才去获取元素，避开DOM未加载的问题：

document.querySelector('#submit').addEventListener('click', function() {
    let check = document.getElementById("userInput");
    if(check.value == '26')
    {
        check.style.backgroundColor = 'green';
        document.querySelector('#feedback2').innerHTML = 'Correct!';
    }
    else
    {
        check.style.backgroundColor = 'red';
        document.querySelector('#feedback2').innerHTML = 'Incorrect!';
    }
})

标准解决方式

确保脚本在DOM完全加载后执行，有两种常用方法：

1. 将脚本标签放在HTML文档的</body>结束标签之前，此时页面所有DOM元素已渲染完成；
2. 使用DOMContentLoaded事件包裹代码，等待DOM加载完成后再执行：

document.addEventListener('DOMContentLoaded', function() {
    let check = document.getElementById("userInput");
    document.querySelector('#submit').addEventListener('click', function() {
        if(check.value == '26')
        {
            check.style.backgroundColor = 'green';
            document.querySelector('#feedback2').innerHTML = 'Correct!';
        }
        else
        {
            check.style.backgroundColor = 'red';
            document.querySelector('#feedback2').innerHTML = 'Incorrect!';
        }
    })
})

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