当 DOM 元素已经可见时，document.querySelector() returns null

Question

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

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

问题：DOM 元素上的 querySelector returnnull 清晰可见：

(1) 用户名输入框在网站上清晰可见(https://internet.ocbc.com/internet-banking/), (2) 但是，当我运行document.querySelector('#access-code')，console returns null.

我想知道为什么会这样，以及当 DOM 节点清晰可见时，浏览器在 querySelector(#id) query 上 return 为空的情况是什么。

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

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

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

它的屏幕截图return输入正确的元素：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'));
 });

顺便说一句，请查看：查看源代码：https://internet.ocbc.com/internet-banking/ 看起来网站主要是在客户端呈现的。

document.querySelector() returns null when DOM elements are already visible