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="">

Answer 1

从csrfmiddlewaretoken事情上讲，您显然是在jsFiddle上执行此操作的。

问题在于控制台开始时是附加到主窗口的，该窗口$是快捷方式的功能getElementById（替代Chrome控制台的内置功能$，后者是的快捷方式querySelectorAll）。由于有与没有元素id input，$('input')返回null。由于inputjsFiddle主窗口上的第一个是csrfmiddlewaretoken输入，因此querySelector找到input。

但是，如果右键单击并检查Result框架中的元素，则会将控制台附加到该框架，该控制台中包含您的input元素和脚本等，因此（取决于脚本中的内容）$是Chrome控制台的default $或jQuery或其他已加载的内容，并且由于其中存在内容，因此在使用$或时可以找到它querySelector。