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
-
2@AlvaroGonzalez what's that edit? I'm using FF?!Thomas Ayoub– Thomas Ayoub2017年03月23日 15:27:56 +00:00Commented Mar 23, 2017 at 15:27
-
My excuses, you omitted that information and I had the impression that screen-shot belong to Chrome. Also, Chrome users never care mentioning the browser ;-) -- Could you please re-tag yourself, or at least explain what browsers you need to cover?Álvaro González– Álvaro González2017年03月23日 15:33:04 +00:00Commented Mar 23, 2017 at 15:33
3 Answers 3
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.
Screenshot
Addition for Firefox
You can reveal input value in via developer tools with following steps:
- Find your input in DOM
- Right click on it and select
Shadow DOM properties - You'll see properties at the bottom-right part of the tools. enter image description here
Note: this is not the same as in Chrome, it's similar to revealing value using javascript.
5 Comments
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).
Comments
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).