代码之家 › 专栏 › 技术社区 › Eric Jones

在什么情况下应该使用querySelector而不是getElementById?

queryselector getelementbyid javascript

Eric Jones · 技术社区 · 1 年前

我对JavaScript、HTML和CSS还很陌生,当我制作一个简单的琐事网站时,我注意到当我尝试使用getElementById将用户输入与预期的文本输入进行比较时,它根本不起作用,一旦代码进入关于比较输入的部分,就什么也没发生。但当我把它切换到querySelector时,代码运行得很好。为什么会这样?

该代码的目标是,如果用户输入的内容与正确答案相匹配,则文本框应变为绿色,并显示文字“正确!”。如果他们错了,文本框应该变成红色,文本应该说“不正确!”。

我的第一个代码提交看起来是这样的,但不起作用。

    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.querySelector('input');”时,代码就按预期工作了。为什么一个比另一个管用?

2 回复 | 直到 1 年前

exoRift 1 年前

querySelector 返回第一个找到的结果,这就是您获得输入的原因。然而 querySelector('input') 实际上查找所有输入。

也许你错过了 id 字段,这就是为什么您无法通过搜索 userInput 身份证件

CcmU 1 年前

你面临的问题似乎与定时这些方法。我建议你看看 this answer ,以更好地理解差异。

本质上,你需要知道 getElementById() 比 querySelector() 即使文档没有完全加载,js代码也会运行。

很可能您的js代码是在加载文档时执行的,因此 getElementById 退货 null 因为找不到指定的元素。这个问题可以像你一样通过改变 获取元素(按ID) 进入 querySelector 但是 这不是一个完全可靠的解决方案 。相反,你应该 defer 您的JavaScript,或者确保您正在搜索的内容以另一种方式加载。