Element Prototype Extension - Features

The following features are currently supported

• Unobtrusive and transparent implementation. No special syntax or semantics are needed. One code for all browsers.
• Most XHTML 1.1 elements are supported (Exceptions are OBJECT and APPLET).
• All elements inherits from HTMLElement.
• Adding methods and properties to the prototype of a constructor is immediatly reflected. The prototype is 'live' so to speak.
• Support for elements created with document.createElement().
• Support for elements created using the innerHTML property.
• Support for elements created with the following methods
  • createCaption
  • createTBody
  • createTFoot
  • createTHead
  • insertCell
  • insertRow
• Elements have proper constructor references. That is the property constructor of any element is a proper reference to the function from which it was instantiated.

Element Prototype Extension - Options

Options which dictates the behavior of EPE

• EPE.ENABLE_CACHE
  Note that this option is enabled by default as a lot of existing scripts depends on innerHTML.

  To fully support nodes added by the innerHTML property it is nessesary to cache the newly created nodes in certain scenarios.

  If you are accessing any methods which are provided by either EPE or UEM in the following order

  1. Create an element
  2. Alter the innerHTML of the newly created element
  3. Calling EPE/UEM specific method of one of the nodes inserted by innerHTML

  cahing is needed to have access to the functions. An example could be

   1 // Step 1
   2 var div = document.createElement('div');
   3 // Step 2
   4 div.innerHTML = '<input type=\"text\" />';
   5 // Step 3
   6 div.firstChild.addEventListener('keyup', someFunction, false);// Step 1
  var div = document.createElement('div');
  // Step 2
  div.innerHTML = '<input type=\"text\" />';
  // Step 3
  div.firstChild.addEventListener('keyup', someFunction, false);
  

  If you are making changes to the prototype object of an element in the order below

  1. Create an element
  2. Alter the prototype of that element
  3. Accesssing the new property of the prototype

  caching is needed if you want to carry out step 3. Here is an example

   1 // Step 1
   2 var div = document.createElement('div');
   3 // Step 2
   4 HTMLDivElement.prototype.newProperty = 'Hello World';
   5 // Step 3
   6 alert(div.newProperty);// Step 1
  var div = document.createElement('div');
  // Step 2
  HTMLDivElement.prototype.newProperty = 'Hello World';
  // Step 3
  alert(div.newProperty);
  

  If your code does not match any of the above scenarios you should turn this feature of to preserve memory, CPU and to speed of changes to the DOM.

Element Prototype Extension - DOM Corrections

Optional DOM corrections. (Thanks to Peter-Paul Koch for creating the DOM Compatibility Tables)

• HTMLElement.getAttribute

  Attributes 'class', 'for', 'style' and 'accessKey' is correctly reported.
  Event handlers are correctly reported as strings instead of anonymous functions.
  Note that the 'href' property of A tags are reported as an absolute URL when specified in the document in IE 6 and 7 no matter what the attribute actually contains. If the attribute value is set by script then reading the attribute will show correctly. There is no way to work around this.

• HTMLElement.hasAttribute

  Implementation of W3C Element.hasAttribute which allows you to check whether a given attribute is defined on an element.
  For attribute 'coords' of A and AREA tags hasAttribute will always return true if the coords attribute is specified as this attribute cannot be removed in IE 6 + 7.

• HTMLElement.hasAttributes

  Implementation of W3C Element.hasAttributes which allows you to check whether a given element has any attributes defined. See also notes for HTMLElement.hasAttributes.

• HTMLElement.removeAttribute

  Event handlers are correctly removed.

• HTMLElement.removeAttributeNode

  Attribute 'style' is correctly removed.
  Event handlers are correctly removed.

• HTMLElement.setAttribute

  Attributes 'class', 'for' and 'style' are correctly set.
  Event handlers are correctly set.

• HTMLElement.setAttributeNode

  Attributes 'class', 'for' and 'style' are correctly set.
  Event handlers are correctly set.

• HTMLSelectElement.add

  The native IE implementation expects the second parameter to be an integer specifying the index in the options collection where the new option should be inserted. IE allows you to leave out the second paramter but it can not be null. This makes it incompatible with the W3C specification implemented by Mozilla. Including this module will correct the behavior of IE to comply with W3C.