Con esto te darás cuenta:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript">
var pp=(function(){
/* ---- métodos privados ---- */
var extendidos={};
var metodosPrivados={
css:function(propiedad,valor){
if(!valor)
return this[0].style[propiedad];
this[0].style[propiedad]=valor;
return this;
},
addEvent: function(type, fn ) {
if ( this[0].addEventListener ) {
this[0].addEventListener( type, fn, false );
} else if(this[0].attachEvent){
var _this=this[0];
var f= function(){fn.call(_this,window.event);}
this[0].attachEvent( 'on'+type, f);
this[0][fn.toString()+type]=f;
}else{
this[0]['on'+type]=fn;
}
var ev={_obj:this[0],_evType:type,_fn:fn};
window.EvRegister=window.EvRegister || [];
window.EvRegister.push(ev);
return this;
}
};
/* ---- métodos públicos ---- */
return{
extend:function(el,obj){
if( extendidos.hasOwnProperty(el[0]) && el!=metodosPrivados )return extendidos[el[0]];
for(var i in obj)
el[i]=obj[i];
extendidos[el[0]]=el;
return el;
},
get:function(id){
if(!document.getElementById(id))return false;
var el=[];//wrapper
el[0]=document.getElementById(id);
return pp.extend(el,metodosPrivados);
}
}
})();
var $=pp.get;
onload=function(){
$('algo').css('cursor','pointer').css('background','red').addEvent('click',function(){alert(this.id);});
$('algo').css('color','#FFF');
}
</script>
</head>
<body>
<div id="algo">test</div>
</body>
</html>
Si ahora intentás hacer algo como esto:
Código PHP:
document.getElementById('algo').css('color','#FFF');//error
obtendrás un error ya que css no es un método añadido al elemento DOM (host object) sino a su wrapper (objeto definido por usuario que tiene al objeto DOM como uno de sus miembros)