Why developing for IE is a royal PITA, part 1: The DOM.

Everyone knows, the DOM is cool, and with it, you can manipulate your pages to do whatever you want!... unless you are developing for IE.

Here's a breakdown of the most common tasks with the DOM, and the typical DOM Methods. For fun, lets color code them as green for fully supported in IE, and red for not fully supported, or not supported at all.

Finding Nodes:
getElementById(...)
getElementsByTagName(...)

Creating Nodes:
createElement(...)
createTextNode(...)

Editing Nodes:
setAttribute(...)
getAttribute(...)

Moving/Copying Nodes:
cloneNode(...)


Managing Events:
addEventListener(...)
removeEventListener(...)

Managing Status:


So, by any chance, did you notice that there are a few of the main methods, that just don't work! Now, we should clarify... some of these work most of the time, but they all fail to some extent. Lets start with getElementById(), as the name implies, it should return whatever it finds, that matches the ID you supply... and it does, but it ALSO returns anything it finds, with a NAME attribute, that matches the ID you requested! [WRONG!]

Okay you say, thats not too bad, well, lets try setAttribute(). This too works fine, as long as you are not trying to set any of the following attributes (they all fail). 'class', 'style', 'for', 'accesskey', 'usemap', 'checked' (on a radio or checkbox field, that has not been appended to the DOM yet), 'type' (on an input field that has already been appended to the DOM), on* (* = any inline event, e.g. 'onclick', 'onchange', 'onkeypress').

...there's much more, but I'll have to finish this post later...

Bugs, Bugs, Bugs:

Every browser will have bugs. But as a developer, some are more annoying than others, as they stall your development process, or cause you to spend a great deal of time trying to solve what appears to be the simplest little problem.

I'm going to use this post, as a starting point, for the "Top Ten" bugs in each browser, that drive developers up the wall in frustration. Feel free to post your own... and We'll revise this list as we go.

Mozilla Firefox

1. The title attribute, is limited to about 60 characters, and doesn't support line breaks.
2. ???
   

Internet Explorer 6

1. The rendering of select lists is on top... of everything! so if you want to float a cool little calendar, or funky menu on top, you're SOL. (unless you hide the select lists, or slip in additional iframe layers underneath your your floating content.
2. ???
   

Internet Explorer 7

1. The button element, is still not useable to this day, because it submits the innerHTML, not the content of the value attribute
   
2. No Javascript on about:blank
3. Colors of PNG images have the wrong gamma
4. onchange doens't fire, on fields where autocomplete is selected
5. onchange doesn't fire, on radio buttons, until you click elsewhere on the page
6. No CSS support for :focus or :active
7. ???
   

Opera

1. ???
   

Safari

1. ???
   

Konqueror

1. ???
   

Feel that you have a candidate for the top ten? Share it! Maybe we've overlooked something.