odd IE quirk with IMG id attribute

IE often creates convenience variables for elements with an ID attribute. For example, if your document contains a

<div id="navigation">

your script can refer to "navigation" without calling getElementById. This is also called polluting the global namespace with element references. It is a non-standard feature and your scripts should use getElementById instead of referring to elements directly with convenience variables.

As this testpage shows, IE will also let you refer to an image element with document.imageid – but only if the IMG tag also has a name attribute! And it does not create global variables for IMG elements with IDs!

That is rather inconsistent..

As we see from that test page, Opera is trying too hard to be IE-compatible, it is supporting more window.id references than IE itself. However, Opera isn't aware of the document.imgID approach – which is why this page fails in Opera.

That webmaster could have used a number of syntaxes that would work –

and of those three out of five are supported just to cater for lazy webmasters. Unfortunately, the author happened to pick just about the only option Opera had forgotten to implement. Oh well. Life isn't fair, neither is the web.


4 thoughts on “odd IE quirk with IMG id attribute

  1. Just as a related note, the last time I had problems with IE's pollution of the global namespace was when I was redesigning Better-Browser.com, not long time ago. I wanted to store element objects of some of the elements on the page in global variables, because it's much easier to refer to variables than document.getElementById() all the time.

    Well, I had a paragraph with id="copyright". I created the global variable "copyright". Because I did it from inside a function, I couldn't use 'var'.

    copyright = document.getElementById('copyright');

    It worked all right in Opera and Gecko, but IE threw me an error about not being able to modify the properties of an object. WTF? I thought quite obviously. Quite soon I found out that "copyright" already _was_ the #copyright element, because IE lets you use that shortcut. So it thought I was trying to modify the #copyright element. The solution was to detect the object first and simply not define it if it already existed (as in IE).

  2. Short answer: I don't know.

    Long answer: we possibly should remove some of what we are doing today, since the test page shows that we're doing considerably more than IE. The likely reason for that is that we *think* IE does that much. IE's behaviour is often inconsistent and it is hard to map out exactly what it does in every situation.
    Personally I would be sceptical to adding even more lazy shortcut IEisms..

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s