document.getElementById not working in IE8

The title is a bit misleading. document.getElementById actually does work in IE8, it just works differently than it did in previous versions.

Previously (in IE8 Compatibility Mode and earlier), getElementById actually searched based on name and id. This means that lazy or ignorant developers might have gotten used to using name when they meant id. This would have worked fine for the last several years, but with IE8 came Standards!

The real crux of the problem is that when there are colons (:) in the id of the property (which is generally also the name), they get converted to underscores (_).

In an ideal world, the fix would be to use a method named getElementByName, but there is no such thing. Fortunately, you can easily convert the name to an id with a quick replace:

<br /> reg = /:/g;<br /> strId = strName.replace(reg, "_");

If you want to get fancy about it, you can even make your own function:

function convertNameToId(strId)<br /> {<br /> reg = /:/g;<br /> return strId.replace(reg, "_");<br /> }

Thus you could change a call of document.getElementById(strName) to document.getElementById(convertNameToId(strName)) and you would be good.

I’d like to thank blogger Max Graham for his comment on Yosif Yosifov’s post getElementById compared in IE6, IE7 and IE8, which helped me figure out why things were going wrong.