Class for the DOM

It’s alive!! I have created a very cool, very simple, function to create new javascript objects that are (not just act upon) HTML DOM elements. Let me explain. Say I have a cool new tree menu I’m creating (true story), and I want others to be able to just start creating the menu items and adding them in via javascript if they need to. The ideal way would be to just say myItem = new MenuItem(‘Cool Item’); and have it return to me the actual menu item (the TR tag or LI tag) which can be inserted into the menu.

No more of this element wrapper stuff. I don’t want to code my classes to act upon a DOM element. I want to write them as if they actually are the DOM element, just a specialized one. This makes much more sense to me as I am working with the objects of the DOM.

Here is the code:

var DOMClass = {
    create: function(element) {
        return function() {
            var div = document.createElement('div');
            div.innerHTML = element;
            var elem = div.firstChild;
            delete div;
            for (var property in this) {
                elem[property] = this[property];
            }
            if (this.initialize) elem.initialize.apply(elem, arguments);
            return elem;
        }
    }
};

You can just add this to your Prototype library or something. Then start making your components.

The way to use this is pretty straightforward. First, you create a new “class” like so:

MySentence = DOMClass.create('This is my <strong>great</strong> text');

MySentence.prototype = {
    initialize: function() {
        for (var i = 0; i < this.childNodes.length; i++) {
            if (this.childNodes[i].nodeName == 'STRONG') {
                this.word = this.childNodes[i];
            }
        }
    },
    rewrite: function(word) {
        this.word.innerHTML = word;
    }
};

Let’s walk through this step by step. First, I create a new class called MySentence. It will be a paragraph element and it will have some text inside of it (the contents are not required). Simple enough. I can then declare my prototype for the class which will contain all the methods of my new class, including an initialize method which will be called if it exists. In the initialize method I find the STRONG tag and assign it to the property “word” for use in my other method, rewrite. That method just changes the word inside the STRONG tag. I now have a class that when created, will be a paragraph with some <strong>great</strong> text inside of it and a method to rewrite the word “great.” You may even try it out and see it working in action. Here is a fun test:

window.onload = function() {
    var s = new MySentence();
    document.body.appendChild(s);
    s.onclick = function() {
        this.rewrite('pretty good');
    }
};

Putting all of the above code in a HTML page will give you some text that when clicked on, will change the wording. Pretty useful huh! Ok, so maybe this particular example isn’t uber useful, but coding new objects, widgets, and components might be easier. At least a little bit. You may see the above example in action.

I’ll see what I can add onto this to make it better. Perhaps something where you can access the tags inside by saying this.word = this.strong[0]; instead of having to loop through all the children.

This class works for both IE 6 and Firefox. I would be very interested to know how many other browsers it worked on.

I have another javascript goody that my friend Derek and I worked on together which is pretty cool. I’ll share that soon too.

One Response to “Class for the DOM”

  1. Nancee Rhoe Says:

    Hey thanks for this post ! You have made my day! I will bookmark you