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...