DOM Prototypes in IE 8

Tagged:  

Travis Leithead, a Program Manager for Internet Explorer at Microsoft, writes in a recent blog entry about DOM prototypes in IE 8. In brief, IE 8 is the first version of the browser to expose the JavaScript constructors and prototypes for all DOM objects. This allows JavaScript developers--especially framework developers--to extend the functionality of DOM objects. It is not hard to envision extending IE 8, for example, to implement the (currently not implemented) getElementsByClassName method of HTML 5, which allows you to get all elements of a given CSS class. Travis gives an example of how to do so here:

function _MS_HTML5_getElementsByClassName(classList)
{
     var tokens = classList.split(" ");
     // Pre-fill the list with the results of the first token search
     var staticNodeList = this.querySelectorAll("." + tokens[0]);
     //Start the iterator at 1 since first match already colllected
     for (var i = 1; i < tokens.length; i++)
     {
        // Search for each token independently
        var tempList = this.querySelectorAll("." + tokens[i]);
        // Collects the "keepers" between loop iterations
        var resultList = new Array();
        for (var finalIter=0; finalIter < staticNodeList.length; 
          finalIter++)
        {
            var found = false;
            for (var tempIter=0; tempIter < tempList.length; tempIter++) 
            {
               if (staticNodeList[finalIter] == tempList[tempIter]) {
                  found = true;
                  break; // termination if found
               }
            }
         if (found) {
          // This element was in both lists, it should be perpetuated
          // into the next round of token checking...
          resultList.push(staticNodeList[finalIter]);
         }
       }
       // Copy the AND results for the next token
       staticNodeList = resultList;
     }
     return staticNodeList;
}
HTMLDocument.prototype.getElementsByClassName =
   _MS_HTML5_getElementsByClassName;
Element.prototype.getElementsByClassName =
   _MS_HTML5_getElementsByClassName;

Travis also details IE 8's support for JavaScript getters/setters (currently supported in Firefox, Safari, and Opera) in the article here. Getters and setters are a special feature for defining non-trivial object properties such as innerHTML while retaining the same familiar JavaScript syntax for referencing or assigning the property. The syntax for defining a property is specified by the defineProperty method of ECMAScript 3.1 (aka "JavaScript Harmony"):

Object.defineProperty(  [(DOM object) object],
                        [(string)     property name],
                        [(descriptor) property definition] );

All parameters are required.
Return value: the first parameter (object) passed to the function.

The syntax for retrieving a property definition is:

Object.getOwnPropertyDescriptor( [(DOM object) object],
                                 [(string)     property name] );

All parameters are required.
return value: A "property descriptor" object

Example usage of the special property syntax would be something like the following snippet of code:

// Let's define a property to define the co-ordinates of an
// img element in JSON
var coordDesc = new Object();
//define getter
coordDesc.getter = function() {
   var coords = new Object();
  coords.x = parseInt(this.currentStyle.left);
  coords.y = parseInt(this.currentStyle.top);
  coords.w = parseInt(this.currentStyle.width);
  coords.h = parseInt(this.currentStyle.height);
  return JSON.stringify(coords);
}
//define setter
coordDesc.setter = function(JSONString) {
  var coords = JSON.parse(JSONString);
  if (coords.x) this.style.left   = coords.x + "px";
  if (coords.y) this.style.top    = coords.y + "px";
  if (coords.w) this.style.width  = coords.w + "px";
  if (coords.h) this.style.height = coords.h + "px";
}
//define property
var img = Object.defineProperty(new Image(), "coordinates", coordDesc);
img.src = "images/my_image.png";
// Call the new property
img.coordinates = '{"w":200,"h":100}';
// Read the image's current position
alert(img.coordinates);   // => {"w":200,"h":100}

The Upshot

The combination of these two new features should make IE 8 far more amenable to extensibility than any previous version of Internet Explorer. This should help framework developers bridge the gap between browsers in a much less painful way, and make life easier for the average JavaScript developer.

The two MSDN articles describing DOM prototypes in IE 8 are here:
Document Object Model Prototypes, Part 1: Introduction
Document Object Model Prototypes, Part 2: Accessor (getter/setter) Support

[...] DOM prototypes in IE 8 [...]

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <pre> <div> <blockquote> <object> <embed> <img> <param>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Copy the characters (respecting upper/lower case) from the image.