Internet Explorer (IE) JavaScript document.getElementById whackedness demo

document.getElementById( String id ) explained

When working correctly, document.getElementById() should return the element object whose id attrbute matches the one specified in the call.

The Internet Explorer Problem

IE works correctly on elements that CAN'T have a name attribute. It works incorrectly, however, on elements that can.

As I researched this, I found a function in JavaScript I've never used before:

HTMLCollection.namedItem( String name )
This function seeks for any element within the collection whose id attribute value matches the name specified in the call. If it doesn't find one, it searches for any element whose name attribute matches the name specified in the call. The function returns the first element object it finds that meets the criteria, or null if it can't find one.

My first thought was, Microsoft has their document.getElementById calling their namedItem() function. But then I stepped back and realized through my experiment that IE seems to be matching against both name and id at the same time to match the value.

As you'll notice below, I have two elements for each part of the experiment. The first has the name attribute filled with the id value "my[Element]" I'm wanting to look for. I fill the second element's id attribute with the same value. IE, parsing from the top of the document down, finds the element with the name="my[Element]" first and automatically takes it... it doesn't even wait to see if it can find one with an id that matches first.

I can only assume this was done for optimizing this "convenience feature", but makes for some serious puzzlement and aggravation in troubleshooting why the element a developer can't get to who happens to name/id things in a way similar to what happens in my experiment. Whatever reason, they did it, it's wrong. Please be careful in how you name/id things

On that same token, please don't name your submit buttons name="submit"... you'll override the default submit property which is the form's submit() function... you'll start hating JavaScript and wrongfully pointing fingers at browsers when you try to call myForm.submit() and it doesn't work. :)
... Moving on ...

Special Consideration ASP.net Developers Need To Be Aware Of

If you're an ASP.net programmer, and you need to create some dynamic JavaScript to work with elements generated by ASP.net, not knowing the ID beforehand, it's crucial you use the [myobject].ClientID property as opposed to the [myobject].UniqueID property when creating your dynamic JavaScript. This is ESPECIALLY true if you're using Internet Explorer as your primary browser you develop against, doing secondary testing on other browsers.

If you use [myobject].UniqueId, you will be given the name="" value generated by ASP.net for the HTML element. This works fine in IE, because of the issue explained above... IE will find the element with the name and return it to you. The other browsers won't - so don't count on it.

Instead, use the [myobject].ClientID. It will give you the value ASP.net injects into the id="" attribute of the HTML element it generates, and will work in all browsers without any special tweaking.

ASP.net / JavaScript example

function MyOnClickHandler( iURL )
{
	top.document.location.href = iURL;				
}
				
function HookupEvents()
{
	var hyperlink = document.getElementById('<%# myLink.ClientID %>');
	hyperlink.onclick = function(){ MyOnClickHandler(this.href) };
}