More on getAttribute(), setAttribute() and the “value” attribute
While I was preparing for my previous post, I came across this thread and a comment made by the moderator ‘jkd’ grabbed my attention:
“Another one: input.value versus input.getAttribute(“value”). The latter should return the actual string specified in the markup of the value attribute, while input.value returns the current value of the input element.”
I was somewhat alarmed by this comment, because for over a decade (and a half?) of being a web developer, I never knew about this, and so I did some simple tests and the results were very interesting!
Here is the HTML source for the test page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>" >
<head>
<title>More on getAttribute() and setAttribute()</title>
</head>
<body>
<input id="TextBox1" type="text" value="123" />
<input type="button" value="alert(element.getAttribute('value'));" onclick="alert(document.getElementById('TextBox1').getAttribute('value'));" />
<input type="button" value="alert(element.value);" onclick="alert(document.getElementById('TextBox1').value);" />
<ol>
<li><input type="button" value="element.setAttribute('value', '456');" onclick="document.getElementById('TextBox1').setAttribute('value', '456');" /></li>
<li>Enter 'abc' into the text box.</li>
<li><input type="button" value="element.value = '789';" onclick="document.getElementById('TextBox1').value = '789';" /></li>
<li><input type="button" value="element.setAttribute('value', 'xyz');" onclick="document.getElementById('TextBox1').setAttribute('value', 'xyz');" /></li>
</ol>
</body>
</html>
First, let me clarify two terms I will be using in the remaining post:
- “value” property is element.value;
- “value” attribute is element.getAttribute(“value”);
Open the test page in Chrome, and you should see:
Click the alert(element.getAttribute(‘value’)); button and you should see:
Click the alert(element.value); button and you should see:
Currently, the “value” attribute and the “value” property of the text box has the same initial value of ‘123′, as specified in the HTML mark-up.
Now, follow each of the four steps:
Step 1:
Click the button to set the value of the “value” attribute to ‘456′:
Notice the text box now displays ‘456′.
Click the alert(element.getAttribute(‘value’)); button and you should see:
Click the alert(element.value); button and you should see:
The “value” attribute and the “value” property of the text box now has the value of ‘456′. This is what I expected.
Step 2:
Enter ‘abc’ into the text box. This is manually changing the value of the “value” property.
Click the alert(element.getAttribute(‘value’)); button and you should see:
Huh?
Click the alert(element.value); button and you should see:
No, the attribute value is not the same as the property value! What is going on here?
Step 3:
Click the button to change the property value to ‘789′:
Click the alert(element.getAttribute(‘value’)); button and you should still see:
Click the alert(element.value); button and you should see:
Okay, basically, we got the same behavior as in step 2.
Step 4:
Click the button to change the attribute value to ‘xyz’:
Notice that the the text box is still displaying ‘789′, which is the property value we had set in step 3.
Click the alert(element.getAttribute(‘value’)); button and you should see:
Click the alert(element.value); button and you should still see:
This confirms that once set, the value of the property is independent from the value of the attribute.
Wasn’t that interesting? Well, I thought it was! Now run the test in Firefox, Opera, Safari, and Internet Explorer!!!
With Chrome, Firefox, Opera and Safari, the following behaviors were observed:
- The “value” attribute is disconnected from the “value” property.
(element.getAttribute(“value”) !== element.value) - Setting the “value” attribute does not directly affect the “value” property.
- If the value of the “value” property has not been set, it will return the value of the “value” attribute as default.
With Internet Explorer, the following behaviors were observed:
- The “value” attribute is connected to the “value” property.
(element.getAttribute(“value”) === element.value) - Setting the “value” attribute directly affects the “value” property.
- The value of the property is always the same as the value of the attribute.
It seems that using element.setAttribute() and element.getAttribute() methods, especially on the “value” attribute is fraught with problems. So my conclusion is to always use element.value to ensure cross-browser compatibility!
Related Links:
This was boggling my mind in an Ajax-value-replace setup. I was using .setAttribute(‘value’,data) instead of .value = data and Chrome’s DOM inspector happily reported changing value, but the form would send with what was typed. I had no idea what was going on. It took a random hunch to change the setAttribute() line to a .value setting. Poof. Magically resolved. I nearly went insane.
Reading jkd’s comment, I’m of the impression this is not a bug. I’m flabberghasted. What’s the purpose of this disconnection, do you know?
The thing is, which of those is sent when the form’s submitted? Opera seems to send the contents of the ‘value’ attribute on form submission, whereas FireFox and Chrome decide .value is what goes. Do you know which behaviour is correct, there?
Neike Taika-Tessaro
July 28, 2009 at 2:06 pm
[...] http://updatepanel.net/2008/12/31/more-on-getattribute-setattribute-and-the-value-attribute/ [...]
input中attribute和property的区别 | vangie
August 11, 2009 at 5:59 am