IEtoW3C.js Compatibility Script Documentation

Where To Get It:

• IEtoW3C.js - the script
• IEtoW3C-loader.js - optional lightweight loader script

What It Does:

The purpose of this script is to modify the MSIE DOM to bring it into near-compliance with the W3C DOM Level 2. Below is a listing of the DOM objects, properties, and methods that are not directly supported by MSIE but are fully or mostly supported by using this script:

DOM Level 2 Events (the biggie)

• {window|document|Element}.addEventListener(eventType,handler,capture)
• {window|document|Element}.removeEventListener(eventType,handler,capture)
• document.createEvent(eventFamily)
• Element.dispatchEvent(event)
• Event object:
  • Event.currentTarget
  • Event.target
  • Event.relatedTarget
  • Event.stopPropagation()
  • Event.preventDefault()
  • Event.bubbles
  • Event.cancelable
  • Event.timeStamp
  • KeyEvent.charCode

DOM Level 2 Core

• document.createElementNS(namespace, tagName) *
• {document|Element}.getElementsByTagNameNS(namespace, tagName) *

* Note: These are only enabled in XML context, and they don't actually handle namespaces but are just pointers to the built-in createElement() and getElementsByTagName() methods. Use of these is not recommended.

DOM Level 2 Style

• getComputedStyle(element,pseudo).getPropertyValue(property)

DOM Level 2 Views

• document.defaultView

The items I find most useful are the Events and Style modules. The former unifies the events model, including the entire event capture/bubble flow, and the latter is very useful in finding an element's cascaded style properties.

How To Use It:

Include a <script/> reference to IEtoW3C.js or IEtoW3C-loader.js in your HTML file, before any other scripts. Then freely use the W3C DOM in any following scripts, without having to worry about browser detection or code forking.

See the following resources for more information on using the W3C DOM:

• W3C's DOM Technical Reports (the specs)
• Scott Andrew LaPera's articles on DOM and DHTML, particularly "Working With Events in Netscape 6"

What It Depends On:

None.

Compatibility:

Adds W3C DOM Core, Events, Style, and Views support to Microsoft Internet Explorer. Adds partial W3C DOM Style support to Opera 7.

This script is geared toward fixing the standards support of browsers with broken standards support (mostly Internet Explorer), therefore it should have no effect on other browsers. Conveniently, nearly every other mainstream browser (Mozilla/Netscape, Safari/KHTML, most of Opera 7) appears to have strong enough standards support so as not to need the fixes this script provides, so they ignore it. So theoretically, with use of this script you should be able to write a W3C DOM-compliant script and have it work in any current mainstream browser.

Because standards-compliant browsers don't need this rather large script, there is a small supporting script, IEtoW3C-loader.js, that will only load the full script if it is needed. This gives the full benefit of the script, without making compliant browsers download it.

Demonstration:

Test Cases demonstrating basic and advanced usage

To Do:

• Test #8 doesn't work quite right (if link clicked before "add" button, listener not added, also screws up other tests)
• Try to make functions in IEtoW3C_hookupDOMEventsOn references to named funcs instead of anonymous - might help memory size
• Continue work on preventing memory leakage in MSIE
• Fix document.implementation.createDocument() support in MSIE6 if possible (IE6 partially implements the document.implementation object, but doesn't seem to allow adding methods to it.)
• Break into modules for each DOM spec (Events, Style, Core...)
• Make the namespace-aware DOM methods (document.createElementNS() and Element.getElementsByTagNameNS()) actually handle namespaces.

Known Issues:

• In the past there were severe problems with memory leaks. These seem to have been mostly solved as of 2005-04-27, but may still occur in small doses.

• As of 2002-10-15, Support for MSIE5 Macintosh has been added. However, this support is fragile and has some serious bugs, so it has been disabled in the first line of the DOM2 Events section in the script. The bugs are:

  • Since Mac IE doesn't recognize Element.attachEvent(), the core event listening is done by using the old Element.onevent=handler; syntax. The unfortunate side-effect of this is that if any script uses that syntax to set new event listeners, all the listeners set by addEventListener() will be lost. However, if all scripts consistengly use addEventListener() instead of the old syntax, it should work well.
  • It seems keypress events do not propagate to form fields. So adding a keypress listener to an input field will disable text entry.
  • Elements created by DOM scripts will not get the W3C properties and methods hooked on to them automatically.
• MSIE does not recognize event listeners on nodes other than elements. This will result in instances where the "target" of an event may be the text node in compliant browsers but the text node's parent element in MSIE.

• Performance: Using this script as a compatibility layer will significantly slow down initial page rendering (as the additional properties and methods are hooked onto each element) and all event handling (as the listening element's entire DOM lineage is walked). There are a few things that can be done when authoring to optimize performance:

  • Keep the number of elements in the document as small as possible.
  • Keep elements with listeners as shallow in the DOM hierarchy as possible. This minimizes the number of levels the script has to walk through when an event is fired.

  Needless to say, these both suck. I am continuing to investigate ways to improve performance.

• Opera 7 is given partial DOM2 Style support; however, ComputedStyle.getPropertyValue(prop) only works on style properties that have an offset* analog, such as offsetWidth, offsetHeight, etc. Any other properties will return null in Opera 7.

License:

The contents of this file are subject to the Mozilla Public License Version 1.1 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.mozilla.org/MPL/

Software distributed under the License is distributed on an "AS IS" basis, WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the specific language governing rights and limitations under the License.

The Initial Developer of the Original Code is Jason Johnston (jj{at}lojjic[dot]net). Portions created by the Initial Developer are Copyright (C) 2004 the Initial Developer. All Rights Reserved.

This code is provided for you to use free of charge. If you find it useful please consider making a donation to help me continue to create tools like this one. You can find my contact info at http://lojjic.net.