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

时间:2017-05-17 07:14:45

标签: javascript html google-chrome dom element

我正在尝试编辑元素的输入值。我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="">

1 个答案:

答案 0 :(得分:5)

csrfmiddlewaretoken开始,你显然是在jsFiddle 上做这个

问题是控制台开始附加到主窗口,其中$getElementById的快捷方式的功能(覆盖Chrome控制台的内置$,其中是querySelectorAll)的快捷方式。由于id input没有元素,$('input')会返回null。由于jsFiddle主窗口上的第一个inputcsrfmiddlewaretoken输入,querySelector会找到input

但是,如果右键单击并检查结果框架中的元素,则控制台随后将附加到框架上,其中包含input元素和脚本等等(因此取决于在您的脚本中)$是Chrome控制台的默认$或jQuery或您加载的任何其他内容,并且因为您的内容在那里,您可以在使用$或{{1 }}