altri SmileANCORA ANCORA SMILE!!E ringraziate donia x queste!!
Nuova Discussione
Rispondi
Cerca nel forum
 
Pagina precedente | 1 | Pagina successiva
Vota | Stampa | Notifica email    
Autore

kentaromiura InnerDom

Ultimo Aggiornamento: 04/05/2006 22:09
OFFLINE
Post: 514
Post: 340
Registrato il: 26/06/2003
Città: ALTIVOLE
Sesso: Maschile
Occupazione: Studente
Utente Senior
WHY INNERDOM

Some months ago I found that innerHTML is not a standard way to manipulate HTML. Actually it is a proprietary implementation followed by many browser, althought it's very close to a de-facto standard and a lot faster that DOM actions.
So I learnt what could replace innerHTML as the combinations of createElement, insertBefore or the better replaceChild, setAttribute; so I wrote the code this way...

However I felt the need to write HTML directly into a node in a single step.
So I thought and I wrote a function ResToDom that appends an object in eval-notation
down to a node. Recently I felt it wasn't enough.
What I really needed was a function that used that EVAL-Notation object and replace a node (as innerHTML does). I rewrite the whole resToDom into innerDom (i used two different names as the functions are different).

Innerdom takes an object in EVAL notation and tries to convert it into HTML.
this object has 2 special properties:

TAG "the name of the tag to create"
INNER "what tag contains"

If innerDom finds an array it concatenates the nodes into a single node, so if used to write:

document.getElementById("node").innerHTML="aaa <b>some bold text<b/>";

now you can write it as:

innerDom("node",[{TAG:'a',name:'aa'},' ',{TAG:'b',INNER:'some bold text'}]);

Isn't that sw33t?

why EvaL-Notation?

because JSON it nowadays very frequently used joint with AJAx.
Modificato da kentaromiura 04/05/2006 22.08

____________________________
_____________
Kentaromiura
14/04/2006 00:48
 
Email
 
Scheda Utente
 
Modifica
 
Cancella
 
Quota
OFFLINE
Post: 515
Post: 341
Registrato il: 26/06/2003
Città: ALTIVOLE
Sesso: Maschile
Occupazione: Studente
Utente Senior
InnerDom.js
look at the Update..
Modificato da kentaromiura 14/04/2006 13.05

____________________________
_____________
Kentaromiura
14/04/2006 00:50
 
Email
 
Scheda Utente
 
Modifica
 
Cancella
 
Quota
OFFLINE
Post: 516
Post: 342
Registrato il: 26/06/2003
Città: ALTIVOLE
Sesso: Maschile
Occupazione: Studente
Utente Senior
test.htm
<html>
<head>
<script src="innerDom.js"></script>
<script>
onload=function(){
var obj={TAG:'a',href:'#',INNER:'ciao'};
innerDom(document.getElementById("ou"),obj);
}
</script>
</head>
<body>
<div id="ou">w</div>
</body>
</html>

____________________________
_____________
Kentaromiura
14/04/2006 00:51
 
Email
 
Scheda Utente
 
Modifica
 
Cancella
 
Quota
OFFLINE
Post: 517
Post: 343
Registrato il: 26/06/2003
Città: ALTIVOLE
Sesso: Maschile
Occupazione: Studente
Utente Senior
UPDATE innerDom.js
/*Inner Dom 1.01 corrected Array issue,
released under Creative commons license ;)
http://creativecommons.org/licenses/by-nc-nd/2.0/
*/
var D=document;
function rep(o,n){
o.parentNode.replaceChild(n,o);
return n;
}
function app(r,n){
return r.appendChild(n);
}
function text(t){
return D.createTextNode(t);
}
function ele(el){
return D.createElement(el);
}
function set(n,an,av){
n.setAttribute(an,av);
}

function doObject(obj){
var nodo=ele(obj.TAG);
for(var prop in obj){
if(prop!="INNER" && prop !="TAG")
set(nodo,prop,obj[prop]);
else
if(prop=="INNER"){
var t=ele("span");
app(D.getElementsByTagName("body")[0],t);
app(nodo,innerDo(t,obj.INNER));
}
}
return nodo;
}
function doArray(a){

var max=a.length;
var a2=new Array(max);
for(var i=0;i<max;i++){

switch(a[i].constructor){
case Object:
a2[i]=doObject(a[i]);

break;
case Array:
a2[i]=doArray(a[i]);break
default:
a2[i]=text(""+a[i]);break;
}
}
return a2;
}
function innerDom(domnode,obj){

var max=domnode.childNodes.length;
for(var i=0;i<max;i++)
domnode.removeChild(domnode.childNodes[i]);

innerDo(domnode,obj);



}

function innerDo(domnode,obj){

switch (obj.constructor){
case String: return rep(domnode,text(obj));break;
case Number: return rep(domnode,text(""+obj));break;
case Array:
var a=doArray(obj);
var max=a.length;
for(var i=0;i<max;i++)
app(domnode,a[i]);
return domnode;
break;
case Object: return rep(domnode,doObject(obj));break;
}
}
Modificato da kentaromiura 14/04/2006 13.44

____________________________
_____________
[URL]http://www.freeforumzone.com/viewforum.aspx?f=19716[=URL]Kentaromiura[/URL]
14/04/2006 09:29
 
Email
 
Scheda Utente
 
Modifica
 
Cancella
 
Quota
OFFLINE
Post: 518
Post: 344
Registrato il: 26/06/2003
Città: ALTIVOLE
Sesso: Maschile
Occupazione: Studente
Utente Senior
1.2 version ^_^;;
/*
Inner Dom 1.2 speed increase,
corrected table issue, 
released under Creative commons license ;)
http://creativecommons.org/licenses/by-nc-nd/2.0/
*/
var innerDom = function(){
	
var D=document;
var F=D.createDocumentFragment();

function rep(o,n){
	if(o.parentNode)
	o.parentNode.replaceChild(n,o);
	return n;
}
function app(r,n){
	return r.appendChild(n);
}
function text(t){
	return D.createTextNode(t);
}
function ele(el){
	return D.createElement(el);
}
function set(n,an,av){
	n.setAttribute(an,av);
}


function doObject(obj){
	var nodo=ele(obj.TAG);
	for(var prop in obj){
		if(prop!="INNER" && prop !="TAG")
			set(nodo,prop,obj[prop]);
		else
			if(prop=="INNER"){				
				var t=app(F,D.createDocumentFragment());
				app(nodo,innerDo(t,obj.INNER));
			}
	}
	return nodo;
}

function doArray(a,df){
	
	var max=a.length;
	
	for(var i=0;i<max;i++){	
		app(df,innerDo(D.createDocumentFragment(),a));
	}
	return df;
}

function innerDo(domnode,obj){
	
	switch (obj.constructor){
		case String: return rep(domnode,text(obj));break;
		case Number: return rep(domnode,text(""+obj));break;
		case Array:  return rep(domnode,doArray(obj,D.createDocumentFragment()));
		break;
		case Object: return rep(domnode,doObject(obj));break;
	}
}

this.innerDom=innerDo 
}

____________________________
_____________
Kentaromiura
20/04/2006 08:07
 
Email
 
Scheda Utente
 
Modifica
 
Cancella
 
Quota
OFFLINE
Post: 519
Post: 345
Registrato il: 26/06/2003
Città: ALTIVOLE
Sesso: Maschile
Occupazione: Studente
Utente Senior
/*
Inner Dom 1.2.2 ultra-optimized version
released under Creative commons license ;)
http://creativecommons.org/licenses/by-nc-nd/2.0/
*/
var undefined;
var D=document;


function rep(o,n){
if(o.parentNode)
o.parentNode.replaceChild(n,o);
return n;
}

function app(r,n){
return r.appendChild(n);
}
function text(t){
return D.createTextNode(t);
}
function ele(el){
return D.createElement(el);
}
function set(n,an,av){
n.setAttribute(an,av);
}


function doObject(obj){

var nodo=ele(obj["TAG"]);
for(var prop in obj){
if(prop!="INNER" && prop !="TAG")
set(nodo,prop,obj[prop]);
else
if(prop=="INNER"){
innerDom(nodo,obj["INNER"],true);
}
}
return nodo;
}

function innerDom(domnode,obj,bapp){
var tmp;
switch (obj.constructor){
case String: tmp=text(obj);break;
case Number: tmp=text(""+obj);break;
case Array:
var tmp=D.createDocumentFragment();
var max=obj.length;
var i=0;
while(i innerDom(tmp,obj[i++],true);
}

break;
case Object: tmp=doObject(obj);break;
}
if(bapp)
app(domnode,tmp);
else
rep(domnode,tmp);
return domnode;
}

[Modificato da kentaromiura 04/05/2006 22.09]


____________________________
_____________
Kentaromiura
20/04/2006 14:27
 
Email
 
Scheda Utente
 
Modifica
 
Cancella
 
Quota
Amministra Discussione: | Chiudi | Sposta | Cancella | Modifica | Notifica email Pagina precedente | 1 | Pagina successiva
Nuova Discussione
Rispondi

Feed | Forum | Bacheca | Album | Utenti | Cerca | Login | Registrati | Amministra
Crea forum gratis, gestisci la tua comunità! Iscriviti a FreeForumZone
FreeForumZone [v.6.1] - Leggendo la pagina si accettano regolamento e privacy
Tutti gli orari sono GMT+01:00. Adesso sono le 07:00. Versione: Stampabile | Mobile
Copyright © 2000-2024 FFZ srl - www.freeforumzone.com