Next! - Element

Hi everyone!

Today i am going to talk about DOM elements and how to extend them


In most modern browsers there are Interfaces for all kind of elements. All them extend the base Interface: HTMLElement. For example a div tag use the interface: HTMLDivElement that extends HTMLElement.

So this mean that we can easily add functions to elements, like this:

HTMLElement.prototype.hide=function(){
    this.style.display="none";
}  

And now we can call that function on any element, for example:

document.getElementById("test").hide();
document.createElement("a").hide();

Nice huh?

Yes it is very nice and may come in handy but theres a problem... the same problem ever... Internet Explorer DON'T support it. Also even HTMLElement don't exist!

So what can we do?

    Next.browserExtensions=true; 
    if (!window.HTMLElement ){
        window.HTMLElement = function(){};//Empty function
        Next.browserExtensions=false; 
    }
   
    //now we need to create a helper function to extend the object on unsupported browsers  
    HTMLElement.extend= function(element){
       if (element && !element._extended && !Next.browserExtensions){
          for (var i in HTMLElement.prototype){
              element[i]=HTMLElement.prototype[i];  
           }
       }
       return element;
    };
    //this is a marker, so we dont exten the same object each time we  need it
    HTMLElement.prototype._extended=true; 

    HTMLElement.prototype.hide=function(){

        this.style.display="none";
    } ;
   
    //now we need a function to get the element and extend it
    Next.byId=function(element){
       return HTMLElement.extend(document.getElementById(element));
    };

    Next.byId("test").hide();//Now it works on all browsers

This implementation is simple and not much heavy and works well.
Others would make everything rely on Object extenders

With some work we could do it able to have different functions for different tag's.

Its all for now! Its time to implement ll this on Next!
The next post i might talk about animation say tuned!

Blogged with Flock