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

Question

我们考虑一下这段代码:

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

如果我更改输入框内的文本,我知道我可以通过以下方式检索它:

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

但如果我Right click> Inspect我会看到类似的东西:

有没有办法看到foobar DOM内部的价值？如果没有,这个值存储在哪里？

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

Answer 1

我可以说Chrome.要在DOM中查看输入值,您需要Show user agent shadow DOM在开发人员工具设置>元素中启用.

因此,您将能够看到#inner-editor输入值.

适用于Firefox

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

1. 在DOM中查找您的输入
2. 右键单击它并选择 Shadow DOM properties
3. 您将在工具的右下角看到属性.

注意:这与Chrome中的不同,它类似于使用javascript显示价值.

Answer 2

有什么办法可以在 DOM 中看到它吗？

当今浏览器中的大多数 DOM 检查器中都没有（显然，您可以在 Chrome 中通过查看影子 DOM 来看到显示其价值的东西，作为实现细节；请参阅Andrey 的回答）。例如，它不对应于任何属性，并且这些 DOM 检查器倾向于显示当前元素和属性，但不显示其他属性。他们当然可以，只是我从未见过这样做的人。

如果不是，这个值存储在哪里？

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