Archive for December 2008
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:
Use DOM Level 2 HTML
Immediately after my previous post, I searched around the web for the best (correct and “performant”) method to access attributes of HTML elements; I mean, should I use element.setAttribute() or element.getAttribute() methods, or should I access the attributes directly using JavaScript dot notation or subscript notation?
I think the main problem is that I am old and stubborn and have always visualized HTML elements in my head as tags marked with attributes, instead of objects with methods and properties!
“The DOM Level 2 HTML extends the DOM Level 2 Core API to describe objects and methods specific to HTML documents, and XHTML documents”.
Basically, if an attribute (property) exists in the DOM Level 2 HTML specification, you can access it directly using JavaScript dot notation. Make sure you use the correct camel-case name as JavaScript is case sensitive!
The example from my previous post should now read:
// Creates a check box
var input = document.createElement("input");
input.type = "checkbox";
input.value = option.value;
input.id = itemId;
// Creates an associated label
var label = document.createElement("label");
label.htmlFor = itemId;
label.appendChild(document.createTextNode(option.text));
How to dynamically set the ‘for’ attribute of a ‘label’ tag?
The main purpose of this post is to remind myself the correct way to set the “for” attribute of a label tag in JavaScript, but it may be helpful to you too.
I was working on an extender control that displays a list of check boxes with corresponding labels, and I used DOM APIs to create the elements, like this:
// Creates a check box
var input = document.createElement("input");
input.setAttribute("type", "checkbox");
input.setAttribute("value", option.value);
input.setAttribute("id", itemId);
// Creates an associated label
var label = document.createElement("label");
label.setAttribute("for", itemId);
label.appendChild(document.createTextNode(option.text));
What I found is that browsers including Chrome, Firefox, Opera and Safari correctly set the “for” attribute, whereas Internet Explorer did not!
One solution is to use element.setAttributeNode instead of element.setAttribute:
var forAttr = document.createAttribute("for");
forAttr.value = itemId;
label.setAttributeNode(forAttr);
But a much simpler solution is to use the “htmlFor“ property which can be accessed directly using JavaScript dot notation:
So instead of:
label.setAttribute("for", itemId);
Just use:
label.htmlFor = itemId;
New videos from the YUI Theater
Two more videos have been posted on the YUI Theater and they are well worth watching:
Douglas Crockford: “Ajax Performance”
In this video, Douglas Crockford talks about web application performance optimization.
Only speed up things that take a lot of time.
Speeding up things that take very little time will yield very little improvement.
Nicole Sullivan: “Design Fast Websites (Don’t Blame the Rounded Corners)”
In this video, Nicole Sullivan presents nine best practices for designing faster websites:
- Create a component library of smart objects.
- Use consistent semantic styles.
- Design modules to be transparent on the inside.
- Optimize images and sprites.
- Avoid non-standard browser fonts.
- Use columns rather than rows.
- Choose your bling carefully.
- Be flexible.
- Learn to love grids.
