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

Question

我正在尝试构建一个自动化的Puppeteer脚本，以从我的银行网站下载每月的银行交易。

但是，我遇到一个奇怪的错误（有关此行为的图片，请参见附件Imgur）

https://imgur.com/a/rSwCAxj

问题：querySelector在明显可见的DOM元素上返回null：

屏幕截图：https://imgur.com/d540E6p

（1）用户名输入框在网站（https://internet.ocbc.com/internet-banking/）上清晰可见， （2）但是，当我运行document.querySelector('#access-code')时，控制台返回null。

我想知道为什么会这样，并且在什么情况下，当DOM节点清晰可见时，浏览器会在querySelector(#id) query上返回null。

＃编辑：有效的奇怪解决方法：

我一直在使用浏览器，并使用DevTools检查DOM元素并将其用于复制JS路径。

很奇怪，在使用Chrome Devtools复制JS路径后，document.querySelector('#access-code')返回了正确的元素。

返回正确元素的屏幕截图：https://imgur.com/a/rSwCAxj

在两种情况下，document.querySelector使用完全相同的搜索字符串。

Answer 1

我相信您无法使用document.querySelector('#access-code')获得适当的价值，因为网站使用框架集。

网站上有一个带有src的框架来加载内容

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

在加载主文档时执行DOMContentLoading，而不等待框架内容被加载。

首先，您需要具有用于加载事件的侦听器。

window.addEventListener("load",function() {
   ...
 });

后来您不能简单地使用document.querySelector('#access-code') 因为输入想要获取的是内部框架。您将需要找到一种访问框架内容的方法，然后在其中使用简单的querySelector。

类似这样：

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

顺便说一句，请参阅：view-source：https://internet.ocbc.com/internet-banking/似乎网站主要是在客户端渲染的。