Tuesday, January 15, 2008

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

5 comments:

saunde said...

Adicionei-me ao meu google Reader, estou com pouco tempo ainda não pude observar os posts mais antigos, mas concerteza que irei acompanhar este blog pois estou interessado em aprender mais com esta linguagem.

Já agora um pormenor um pequeno àparte, como faz para meter o código nos posts? Há alguma tag especial para que fique highlighted ? Muito obrigado

Porfirio said...

Infelizmente não dá :(

Não sei se existe algum tipo de plugin para isso, não achei

Simplesmente fiz á mão, mas realmente é bastante chato ;)

Anonymous said...

Boa iniciativa, não deixes é que o projecto se torne em "só mais uma" framework ;)

No entanto devias escrever em português, ou encontrar alguém que saiba escrever bem em inglês para te corrigir os textos, porque o teu não é dos melhores...

Porfirio said...

Aquilo que eu tenho de momento a trabalhar é algo diferente do que qualquer outra framework propõe, espero em brev blogar sobre isso

Quanto ao inglês...

O sei que o meu não é o melhor, faço o que posso, mas acho que deveria manter o blog em inglês para toda gente possa ler e informar-se, também espero que no futuro o meu blog seja notificado no ajaxian.com, vamos a ver o rumo que isto toma

Nunzio castaldi said...

Eccellente!

Ciao dall'Italia.