Javascript + Chrome，只有在我检查完元素之后，控制台才能找到元素 [英] Javascript + Chrome, console can't find element until after I inspect it

问题描述

我正在尝试编辑元素的输入值.我100％确信它已加载到DOM中.但是，当我在控制台中弄乱它时，只有在检查它之后它才能找到该元素.通过标记名称属性进行操作.但是因为检查似乎可以将其转换"为找到，所以肯定有一种自动执行此操作的方法吗?

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

如果我将 $('input')放入控制台，它将返回 null .如果我检查了任何表格，它将返回

 <输入类="FORMshrt2" name ="fd_co_firstname" type ="text" maxlength ="100" value ="> 

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

 <输入类型="hidden" name ="csrfmiddlewaretoken" value ="XXbWi2ygjOsJ8igaEa9MvFb5Nm7xznOD"> 

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

 <输入类="FORMshrt2" name ="fd_co_firstname" type ="text" maxlength ="100" value ="> 

解决方案

从 csrfmiddlewaretoken 事情来看，您显然是在jsFiddle 上进行此操作.

问题是控制台开始附加到主窗口，其中 $ 是一个函数，是 getElementById 的快捷方式(覆盖Chrome控制台的内置 $ ，这是 querySelectorAll 的快捷方式).由于没有带 id input 的元素，因此 $('input')返回 null .由于jsFiddle主窗口上的第一个 input 是 csrfmiddlewaretoken 输入，因此 querySelector 会找到该 input .

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

I am trying to edit an element's input value. I am 100% sure it is loaded in the DOM. However, when I mess with it in console, it cannot find the element until I inspect it. Going by the token name property there is something going on. But because inspect seems to 'convert' it to be able to be found, surely there is a way to do it automatically?

Code in question: https://jsfiddle.net/h8oyLdv4/1/

If I put $('input') in the console it returns null. If I inspect any of the forms, it returns with

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

Also, document.querySelector('input') returns

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

but once I inspect the element, it returns

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

解决方案

From the csrfmiddlewaretoken thing, you're apparently doing this on jsFiddle.

The issue is that the console starts out attached to the main window, in which $ is a function that's a shortcut for getElementById (overriding Chrome console's built-in $, which is a shortcut for querySelectorAll). Since there's no element with the id input, $('input') returns null. Since the first input on jsFiddle's main window is the csrfmiddlewaretoken input, querySelector finds that input.

But if you right-click and inspect an element in the Result frame, the console is then attached to the frame instead, which has your input elements and your scripts and such in it, so (depending on what's in your scripts) $ is either Chrome console's default $ or jQuery or whatever else you have loaded, and because your content is there, you find it when you use $ or querySelector.

这篇关于Javascript + Chrome，只有在我检查完元素之后，控制台才能找到元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！