Javascript + Chrome，控制台在我检查之前找不到元素答案

【问题标题】：Javascript + Chrome, console can't find element until after I inspect itJavascript + Chrome，控制台在我检查之前找不到元素
【发布时间】：2023-03-05 09:06:01
【问题描述】：

我正在尝试编辑元素的输入值。我 100% 确定它已加载到 DOM 中。但是，当我在控制台中弄乱它时，直到我检查它才能找到该元素。通过令牌名称属性，发生了一些事情。但是因为检查似乎将其“转换”为能够被找到，所以肯定有一种方法可以自动完成吗？

有问题的代码：https://jsfiddle.net/h8oyLdv4/1/

如果我将 $('input') 放在控制台中，它会返回 null。如果我检查任何表格，它会返回

<input class="FORMshrt2" name="fd_co_firstname" type="text" maxlength="100" value="">

另外，document.querySelector('input') 返回

<input type="hidden" name="csrfmiddlewaretoken" value="XXbWi2ygjOsJ8igaEa9MvFb5Nm7xznOD">

但是一旦我检查了元素，它就会返回

<input class="FORMshrt2" name="fd_co_firstname" type="text" maxlength="100" value="">

【问题讨论】：

"问题代码：jsfiddle.net/h8oyLdv4/1" 不，这是代码链接到问题。您问题的完整内容必须是在你的问题，不只是链接。链接腐烂，使问题及其答案对未来的人们毫无用处，人们不应该离开现场来帮助你。将minimal reproducible example 放入问题中，最好使用 Stack Snippets（<> 工具栏按钮）使其可运行。更多：How do I ask a good question?
尝试类似 $('input[name="fd_co_firstname"]')，而不仅仅是 $('input')。使用 $('input[name="fd_co_firstname"]').val() 访问值
注明。但是源太大，无法在此处发布，我不想编辑它以防我破坏了某些东西。我仍然认为这个答案会对将来找到它的人有所帮助，因为实际问题有点具体，但它显示的内容会在搜索中出现。

标签： javascript html google-chrome dom element

【解决方案1】：

从 csrfmiddlewaretoken 的事情来看，您显然是在 在 jsFiddle 上这样做的。

问题是控制台开始附加到主窗口，其中$ 是getElementById 的快捷方式的功能（覆盖Chrome 控制台的内置$，这是@987654325 的快捷方式@)。因为id input 没有元素，所以$('input') 返回null。由于 jsFiddle 主窗口上的第一个 input 是 csrfmiddlewaretoken 输入，querySelector 发现 input。

但是，如果您右键单击并检查 Result 框架中的一个元素，那么控制台就会被附加到该框架上，其中包含您的 input 元素和您的脚本等，所以（取决于您的脚本）$ 是 Chrome 控制台的默认 $ 或 jQuery 或您已加载的任何其他内容，因为您的内容在那里，所以当您使用 $ 或 querySelector 时会找到它。

【讨论】：