我的输入当前值存储在哪里？

Question

让我们考虑一下这段代码：

<input type="text" id="my-input" value="foo">

如果我更改输入框内的文字，我知道我可以通过以下方式检索它：

• $('#my-input').val()
• document.getElementById('my-input').value

但如果我右击＆gt; 检查我会看到类似的内容：

有没有办法看到 DOM中的值foobar？如果没有，这个值存储在哪里？

这个问题与浏览器无关，导致这里的背景是IE 11.0.14中的一个奇怪的错误

Answer 1

我可以说Chrome。要查看DOM中的输入值，您需要在开发人员工具设置中启用.bar { height: 30px; white-space: nowrap; } ＆gt;元件。

因此，您可以在其中看到Show user agent shadow DOM的输入值。

Firefox的添加

您可以通过以下步骤在via developer tools中显示输入值：

1. 在DOM中找到您的输入
2. 右键单击它并选择#inner-editor
3. 您会在工具的右下角看到属性。

注意：这与Chrome中的不同，它类似于使用javascript显示价值。

Answer 2

  

有没有办法在DOM中看到它？

目前浏览器中的大多数DOM检查员都没有（显然，通过查看影子DOM，您可以在Chrome中看到显示其价值的内容，作为实现细节;请参阅Andrey's answer）。例如，它与任何属性都不对应，并且那些DOM检查器倾向于显示当前元素和属性，但不显示其他属性。他们肯定可以，我从来没有见过那样做过。

  

如果没有，这个值存储在哪里？

在元素的属性中。当然，元素是浏览器的DOM实现中的对象。 HTMLInputElement有一个value property，以及存储当前值的位置。没有为此定义HTML属性; value attribute是input的默认值，而不是其当前值。 （它反映在defaultValue property中。）因此，与id属性不同，id属性直接反映value属性，q不是反射属性根本没有（因为没有相应的属性可供反映）。

Answer 3

输入（以及大多数类型的HTML元素）具有一大堆未明确属于HTML树的属性。如您所见，更新输入不会修改其HTML。该值存储在内部。

某些浏览器的调试工具（例如Chrome中的调试工具）提供了一个“属性”选项卡，您可以使用该选项卡查看所选元素的属性。如果您在那里查看value属性，它将显示元素的当前值。

在Firefox调试工具中，您可以右键单击DOM查看器中的元素，然后选择“在控制台中使用”。这会将temp变量放入控制台，您可以使用它来访问元素的属性（包括其.value）。