Be aware that there is an obscure bug in this method when used on a form element containing an input element which has the name attribute set to "id".
Example:
<form id="myForm1">
<input id="user_id" name="user_id" value="text" />
</form>
<form id="myForm2">
<input id="id" name="id" value="text" />
</form>
<script type="text/javascript">
var formElement1 = document.getElementById('myForm1');
var formElement2 = document.getElementById('myForm2');
alert(formElement1.getAttribute('id')+ "\n" + formElement2.getAttribute('id'));
</script>
You would expect it to display a JavaScript alert box containing:
myForm1
myForm2
But instead you get:
myForm1
[object]
It appears that this method erroneously returns the input with the name "id" instead of the value of the id attribute of the form itself. This also happens if you use formElement2.id .
To work around the bug, use attributes['id'].value or getAttributeNode('id').value
See: http://www.sixteensmallstones.org/ie-javascript-bugs-overriding-internet-explorers-documentgetelementbyid-to-be-w3c-compliant-exposes-an-additional-bug-in-getattributes (jmaxwilson)
----
[jsudds.msft] By way of explanation, this behavior is due in part to the adding the name attribute as an expando property of the <form> object. In this case, the name attribute overwrites a well-known property (id) in the DOM. The same thing would happen to any of the other properties if a well-known name was used, such as <input name='className' />. The getAttribute method in IE searches for property values using expandos and COM properties rather than the attribute node, as does setAttribute(). This combination of factors can lead to unexpected results.