Native JS Objects

In the Mozilla DOM all objects you can access are native JS objects. This means that all these objects act and behave just like object you have created yourself. This also means that you can get the constructor and prototype of any object, for example for the document object.

If you try to alert the constructor for the document object you will get something like this:

function HTMLDocument() {
   [native code]
}

If you do the same in IE you will get undefined. Not only can you get the constructor, you can also get the prototype of the constructor. If you alert the prototype for the constructor of the document you will get something like this:

[object HTMLDocument]

Extending the prototypes

So what was all that good for. Nothing yet. It just shows that you can get the native prototype object of any constructor for any object in your page. Once you have the prototype you can modify it and all objects that were and will be created from the constructor will benefit from your modifications.

As a simple example we will extend the prototype of the HTMLElement (the constructor that creates all html elements in your page) with a method that changes the color of the text it contains. To do this we add two methods to the prototype, one for setting the color and one for getting it:

HTMLElement.prototype.setColor = function (sColor) {
   this.style.color = sColor;
};

HTMLElement.prototype.getColor = function () {
   return this.style.color;
};

This allows us to call setColor and getColor on any element in the page.

document.getElementById("colorMethodDemo").setColor("red");

Demo

Make red
Make black
Get color

You might think that that was not very impressive and that you could have done that using expandos on each object but the big difference is that all html elements get these methods for free, no need to manually add them.

Setters and Getters

People that have used Java a lot might not think that having to call getProperty() and setProperty(p) is a big issue but when it comes to emulating properties in JavaScript it is a big deal because you don't have to (and cannot) do window.getEvent() to get window.event.

Syntax

The syntax for setters and getters have changed a little since the last time I mentioned them (in the innerHTML for Mozilla article). The main reason for this was that it broke old JavaScript interpreters. The new syntax might look a bit weird but is much more friendly and usable.

object.__defineSetter__(sPropertyName, fSetterFunction)
object.__defineGetter__(sPropertyName, fGetterFunction)

So if we continue our extremely useful sample with the text color we get: (Notice that the object we want to modify is the prototype of HTMLElement).

HTMLElement.prototype.__defineSetter__("color", function (sColor) {
   this.style.color = sColor;
});

HTMLElement.prototype.__defineGetter__("color", function () {
   return this.style.color;
});

This allows us to set and get the property directly on any element.

document.getElementById("colorPropertyDemo").color = "red";

Demo

Make red
Make black
Get color

What is next?

The next step in the IE Emulation series is to know your object models and find the differences between Mozilla and IE. Once we have found the issues we need to find out how the tasks are done in IE and Mozilla respectively. If both browsers can solve the task it is pretty likely that an emulation can be done.

The next step in this serie is to allow Mozilla to understand the IE event model.

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