14

I'm just wondering what the difference is between the two. I have noticed the two methods give different results at times.

j08691
  • 204,283
  • 31
  • 260
  • 272
ama2
  • 2,611
  • 3
  • 20
  • 28
  • possible duplicate of [To use getAttribute(), or not to use getAttribute(): that is the question](http://stackoverflow.com/questions/7278922/to-use-getattribute-or-not-to-use-getattribute-that-is-the-question) – Felix Kling Aug 15 '12 at 17:01
  • 1
    While [this question](http://stackoverflow.com/questions/3953028/any-diffrence-between-element-setattribute-elementattr-element-attr) refers to set instead of get, the information might help you. – j08691 Aug 15 '12 at 17:01
  • 1
    @j08691 attributes that map to properties always reflect the current value of that property. – Esailija Aug 15 '12 at 17:08
  • @j08691 yup that sums it up pretty well – ama2 Aug 15 '12 at 17:13
  • possible duplicate of [When to use setAttribute vs .attribute= in JavaScript?](http://stackoverflow.com/questions/3919291/when-to-use-setattribute-vs-attribute-in-javascript) – Peter O. Dec 05 '12 at 05:16

2 Answers2

27

The difference is that element.value is real time and if a user changes let's say, a textbox input, it will reflect that, and show you the new value.

While getAttribute('value') will still show the original value="whateverWasHere" value.

jsFiddle DEMO

Mark Pieszak - Trilon.io
  • 61,391
  • 14
  • 82
  • 96
  • 2
    this explains the behavior that I'm seeing. Thanks :) – ama2 Aug 15 '12 at 17:12
  • quick question @Mark... why is it that if I do `Element.attributes` on a, say, `input` element, which basically represents key/value pair of strings describing any information regarding that attribute, I don't see the `value` attribute (that stores the actual value that that `input` contains)... it gives me a `NamedNodeMap` object with basically contains some attributes but not the `value` attribute, which holds the actual value. However if I do something like `thatInput.value` I can, ofc, see the value. Why is `value` not in the `attributes` property of the `Element` object? – Marius Mucenicu Sep 11 '19 at 05:20
  • Is `value=""` present on the Element itself? It won't show up on the list (I believe) if it wasn't already specified there, that might be why it's not showing up! But for example if I do `document.querySelector('#test').attributes.value` I see `value=""` of a blank new input textbox @MariusMucenicu – Mark Pieszak - Trilon.io Sep 11 '19 at 13:46
12

.value does not map to any attribute.

.defaultValue maps to the "value" attribute. So when you say elem.getAttribute("value") that's the same as elem.defaultValue.

Additionally, .defaultValue reflects .value when the input is untouched (dirty value flag is false). After the input's value is changed by user interaction, this mapping stops. While the input is untouched, you can change .defaultValue (and thus .setAttribute("value")) and see it change .value as well. Not that this is practically useful but interesting piece of trivia nevertheless.

Community
  • 1
  • 1
Esailija
  • 138,174
  • 23
  • 272
  • 326
  • @ama2 my point is that `.value` is not the same as the attribute `"value"`, but `.defaultValue` is. That's the reason, it's a bit unintuitive. Please consider http://jsfiddle.net/J9Mat/2/ – Esailija Aug 15 '12 at 17:16