What is happening behind .setAttribute vs .attribute=?
input.value
is dot notation, it sets the value
property of the input object.
It does in no way update any attributes, so trying to get an attribute with the same name will not return the updated value.
If for some reason you have to update the attribute, you would do
input.setAttribute('value', 'new_value');
but you shouldn't have to use that, as you generally should be working with the properties, not the attributes, and you'd set and get the value
property, not the attribute.
An attribute in HTML is a key / value pair inside the opening and closing brackets, as in
<div attribute="attribute_value"></div>
In many cases such attributes will set the initial value of the underlying property, and the property is a named key with a value, that is attached to the internal model of an element, which is what we access with javascript, the object holding the model and data for the element.
Changing any of that objects keys or values does not change the HTML, only the internal representation of the element, the object. However, changing the HTML attributes will in some cases change the object representation of the element.
getAttribute
gets the actual attributes from the HTML, not the properties, while element.value
clearly accesses a named property in the object representing that element.
It's important to take note of the differences between attributes and properties.
The value
attribute
The value
attribute of an <input>
, visible in the HTML representation of the element, is mapped to the defaultValue
property. For example:
var i = document.createElement('input');
i.setAttribute('value', 'foo');
console.log(i.defaultValue, i.getAttribute('value')); // "foo foo"
i.defaultValue = 'bar';
console.log(i.defaultValue, i.getAttribute('value')); // "bar bar"
The value
property
The value
property mirrors the defaultValue
property (and value
attribute) until it's explicitly been given a value, so:
var i = document.createElement('input');
i.defaultValue = 'foo';
console.log(i.value); // "foo"
i.value = 'bar';
i.defaultValue = 'foo';
console.log(i.value); // "bar"
This is another way of looking at it:
<input value="foo">
↑↓
input.defaultValue = "foo";
↓
input.value
get(): value === undefined ? input.defaultValue : value
set(newValue): value := newValue
Anchors
When using anchors, the href
attribute and href
property update each other, but in a different way, e.g.:
var a = document.createElement('a');
a.setAttribute('href', '/test');
console.log(a.href); // "http://stackoverflow.com/test"
a.href = '/test';
console.log(a.getAttribute('href')); // "/test"
Other elements
Here's a (partial) list of attributes and their corresponding properties:
element | attribute | property
---------+-----------+----------------
option | selected | defaultSelected (bool)
label | for | htmlFor
input | checked | defaultChecked (bool)
select | multiple | multiple (bool)
li | value | value (int)
As you can see, whereas the attributes are always strings, the corresponding properties may be of other types.