Introduction

The big difference in the way you navigate through a document is that Mozilla navigates throught its nodes while IE4 only allowed you to navigate between its elements. IE5 allows both

parentElement

This one return the parent element of the current element. This is in most cases the same as the parent node. The only time it is not the same is when the parent node is the document and in that case it should return null.

Implementation

Just a simple getter that checks whether the parentNode is the document or not.

HTMLElement.prototype.__defineGetter__("parentElement", function () {
   if (this.parentNode == this.ownerDocument) return null;
   return this.parentNode;
});

children

The children collection in IE is one ugly solution. In its simplest form it works much like an array but it can also be used as a function with one or two arguments. This emulation only emulates the simple collection allowing you to get the child elements either by index, id or name.

Implementation

The solution is to loop over all the child nodes and if it is an element add it to an array. This array is used as the return value. To be able to access a child by its id we also check whether the child node has an id and if it does we add an expando property with this name. If the child has a name we create an array that is accessed using the name and add a reference to the node in the array.

HTMLElement.prototype.__defineGetter__("children", function () {
   var tmp = [];
   var j = 0;
   var n;
   for (var i = 0; i < this.childNodes.length; i++) {
      n = this.childNodes[i];
      if (n.nodeType == 1) {
         tmp[j++] = n;
         if (n.name) {  // named children
            if (!tmp[n.name])
               tmp[n.name] = [];
            tmp[n.name][tmp[n.name].length] = n;
         }
         if (n.id)      // child with id
            tmp[n.id] = n
      }
   }
   return tmp;
});

contains

This method is not used as often as the two previous properties but is often useful and it completes the IE4 element model. The method takes one element as argument and it checks whether the current element contains that element. (If the current element is an ancestor to the argument.)

Implementation

The implement consists of a recursive function that starts from the argument node and walks up the tree until it either passes the root or get to the current element.

HTMLElement.prototype.contains = function (oEl) {
   if (oEl == this) return true;
   if (oEl == null) return false;
   return this.contains(oEl.parentNode);		
};

Usage

To extend the HTMLElement object with the IE Element Model you need to include the ie emu file as well as call the extendElementModel function.

<script type="text/javascript" src="ieemu.js"></script>
<script type="text/javascript">

if (moz) {
   extendElementModel();
}

</script>

Demo

To see this is action follow this link.

Introduction
The power of JS
Event Listeners
Classic Event Handlers
Event Object
InnerHTML Model
Element Model
Document All Model
Current Style Model
???

Author: Erik Arvidsson