JavaScript + Chrome，控制台在检查元素之前找不到它

Question

我想编辑一个元素的输入值。我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="">

- JustaCookie

---

代码在这里：https://jsfiddle.net/h8oyLdv4/1/ 不，那是与问题相关联的代码链接。你的问题的全部内容必须在你的问题中，而不仅仅是链接。链接会失效，使得问题和答案对未来的人无用，人们不应该离开网站来帮助你。在问题中放一个 [mcve]，最好使用 Stack Snippets（<> 工具栏按钮）使其可运行。更多信息：如何提出好问题？ - T.J. Crowder

尝试使用类似于 $('input[name="fd_co_firstname"]') 这样的语法，而不是仅仅使用 $('input')。通过 $('input[name="fd_co_firstname"]').val() 获取其值。 - Aethyn

已注意。但是源代码太大了，我不想编辑它以防止出错。我仍然认为这个答案将帮助未来发现它的任何人，因为实际问题有点特定，但它显示的内容将在搜索中出现。 - JustaCookie

Answer 1

从csrfmiddlewaretoken这个东西来看，你显然是在jsFiddle上进行这个操作。

问题在于，控制台最初附加到主窗口上，在该窗口中，$是一个快捷方式，用于getElementById（覆盖了Chrome控制台内置的$，后者是querySelectorAll的快捷方式）。由于没有具有id input的元素，$('input')返回null。由于jsFiddle主窗口上的第一个input是csrfmiddlewaretoken输入，因此querySelector找到了该input。

但是，如果您右键单击并检查结果框中的元素，则控制台将附加到该框架而不是主窗口上，该框架包含您的input元素和脚本等内容，因此（取决于您的脚本中有什么）$是Chrome控制台的默认值$或jQuery或其他您已加载的内容，因为您的内容在那里，所以您可以使用$或querySelector找到它。

- T.J. Crowder