Where is my input current value stored?

Question

Let's consider this code:

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

If I change the text inside the input box, I know I can retrieve it via:

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

But if I Right click > Inspect I will see something like:

Is there any way to see the value foobar inside the DOM? If not, where is this value stored?

This question is browser agnostic, the background that lead be here is a weird bug in IE 11.0.14

Answer 1

I can say for Chrome. To see input value in DOM you need to enable Show user agent shadow DOM in developer tools settings > Elements.

So you will be able to see #inner-editor with input value in it.

Addition for Firefox

You can reveal input value in via developer tools with following steps:

1. Find your input in DOM
2. Right click on it and select Shadow DOM properties
3. You'll see properties at the bottom-right part of the tools.

Note: this is not the same as in Chrome, it's similar to revealing value using javascript.

Answer 2

Is there any way to see it inside the DOM?

Not in most of the DOM inspectors in browsers today (apparently you can see something showing its value, as an implementation detail, in Chrome by viewing the shadow DOM; see Andrey's answer). It doesn't correspond to any attribute, for instance, and those DOM inspectors tend to show the current element and attributes, but not other properties. They certainly could, I've just never seen one that did.

If not, where is this value stored?

In a property on the element. Elements are objects, of course, within the DOM implementation of the browser. HTMLInputElement has a value property, and that's where the current value is stored. There's no HTML attribute defined for that; the value attribute is the default value of the input, not its current value. (It's reflected in the defaultValue property.) So unlike, say, the id property, which directly reflects the id attribute, value is not a reflected property at all (because there's no corresponding attribute for it to reflect).

Answer 3

An input (and most types of HTML elements) have a whole bunch of properties that are not explicitly part of the HTML tree. As you have found, updating an input does not modify its HTML. The value is stored internally.

Some browsers' debugging tools (such as those in Chrome) provide a Properties tab that you can use to view a selected element's properties. If you view the value property there, it will show you the element's current value.

In the Firefox debugging tools, you can right-click the element in the DOM viewer and select "Use in console". This will drop a temp variable into the console that you can use to access the element's properties (including its .value).