Javascript 当DOM元素已经可见时，document.querySelector（）返回null

我正试图建立一个自动木偶脚本，从我的银行网站下载我每月的银行交易

然而，我遇到了一个奇怪的错误（请参阅附件中的Imgur以了解这种行为的图片）

问题：querySelector在清晰可见的DOM元素上返回null:

截图：

（1） 用户名的输入框在站点（）上清晰可见， （2） 但是，当我运行

document.querySelector（“#访问代码”）

时，控制台返回null

我想知道为什么会出现这种行为，以及当DOM节点清晰可见时，浏览器在

querySelector（#id）查询中返回null的情况是什么

#编辑：奇怪的解决方法

我继续使用浏览器，并使用DevTools检查DOM元素并使用它复制JS路径

奇怪的是，在使用Chrome Devtools复制JS路径之后，
document.querySelector（“#access code”）
返回了正确的元素

返回正确元素的it屏幕截图：

在这两种情况下，
document.querySelector使用完全相同的搜索字符串
我认为使用
document.querySelector（“#访问代码”）
无法获得正确的值，因为网站使用框架集

在网站中，有一个带有src的框架来加载内容

<frame src="/internet-banking/Login/Login">

以后不能简单地使用
document.querySelector（“#访问代码”）
因为你们想要得到的输入在框架内。您需要找到一种方法来访问框架内容，然后在其中使用简单的querySelector

比如：

window.addEventListener("load",function() {
   console.log(window.frames[0].document.querySelector('#access-code'));
 });

顺便说一句，请参见：查看来源：看起来网站主要呈现为客户端。
尝试阅读了两次，但仍然不知道您在说什么。我将尝试重新措辞-谢谢！我的代码有误，要获取框架内容，需要使用
窗口。框架[0]。文档
，因此，如果您注入等待加载事件的代码，然后从框架中获取文档，一切都应该正常，我已将其注入网页。非常感谢您的精彩和清晰的解释！！
window.addEventListener("load",function() {
   console.log(window.frames[0].document.querySelector('#access-code'));
 });