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

Question

我正在尝试编辑元素的输入值。我 100% 确定它已加载到 DOM 中。但是，当我在控制台中弄乱它时，在我检查它之前它找不到该元素。通过代币名称属性，有一些事情正在发生。但是因为inspect好像'convert'能查到，难道有办法自动查到吗？

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

如果我在控制台中输入 $('input') 它 returns null。如果我检查任何表格，它 returns 和

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

此外，document.querySelector('input') returns

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

但是一旦我检查了元素，它 returns

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

Answer 1

从 csrfmiddlewaretoken 来看，你显然是在 on jsFiddle.

问题是控制台开始时附加到主 window，其中 $ 是 getElementById 的快捷方式的函数（覆盖 Chrome 控制台的内置 $，这是 querySelectorAll 的快捷方式）。由于没有包含 id input、$('input') returns null 的元素。由于 jsFiddle 的主要 window 上的第一个 input 是 csrfmiddlewaretoken 输入，因此 querySelector 发现 input.

但是，如果您右键单击并检查结果框架中的一个元素，控制台就会连接到该框架，其中包含您的 input 元素和脚本等，因此（取决于在你的脚本中) $ 是 Chrome 控制台的默认值 $ 或 jQuery 或你加载的任何其他内容，因为你的内容在那里，当你使用 $ 或 querySelector.

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

Javascript + Chrome, console can't find element until after I inspect it

html

javascript

dom

google-chrome

element