Newsgroup: it.comp.lang.javascript
Titolo: outerHTML (mezza soluzione!)

Ciao ng (riflessione: mio malgrado mi ritrovo a consultarvi piuttosto spesso
di recente!)
Qualche post fa' ero giunto alla conclusione che mi serviva il metodo
outerHTML in Mozilla (qualcuno sta' già dando di stomaco?)  ;-)
Aiutandomi con articoli e newsgroup sono giunto a questa "metà" soluzione:
<HTML>
<HEAD>
<SCRIPT LANGUAGE=JavaScript>
if (!document.all&&document.getElementById) {
    HTMLElement.prototype.outerHTML setter = function (str) {
        var r = this.ownerDocument.createRange();
        r.setStartBefore(this);
        var df = r.createContextualFragment(str);
        this.parentNode.replaceChild(df, this);
        return str;
    }
    HTMLElement.prototype.outerHTML getter = function () {
        return getOuterHTML(this)
    }
}
function test() {
lxTbl=document.getElementById('Grd');
lxTbl.rows[1].outerHTML='<TR style="{background:
red}"><TD>A</TD><TD>B</TD></TR>';
}
function test1() {
lxTbl=document.getElementById('Grd');
alert(lxTbl.rows[1].outerHTML);
}
</SCRIPT>
</HEAD>
<BODY>
<TABLE ID=Grd>
<TR><TD>1.1</TD><TD>1.2</TD></TR>
<TR><TD>2.1</TD><TD>2.2</TD></TR>
<TR><TD>3.1</TD><TD>3.2</TD></TR>
</TABLE>
<INPUT TYPE=button value="Put" ONCLICK="test();">
<INPUT TYPE=button value="Get" ONCLICK="test1();">
</BODY>
</HTML>
E' una soluzione a metà perchè funziona solo il "setter" e non il
"getter"!!!
Ossia la funzione test fa' il suo dovere sostituendo il codice html del nodo
con quello specificato.
Invece la funzione test1 genera un errore dicendo che "non conosce
getOuterHTML"; d'altro canto comprendo la "perplessità" del mio browser di
fronte a questa funzione che non è definita da nessuna parte, ed infatti non
ho capito come potrebbe mai funzionare ma d'altronde questo era l'esempio
che era fornito su un articolo (e sono sicuro che non c'era nessun genere di
riferimento ad altri file, script, ... dove potesse essere definita questa
funzione).
Ho tentato di modificare il "getter" in questo modo:
<SCRIPT LANGUAGE=JavaScript>
if (!document.all&&document.getElementById) {
    HTMLElement.prototype.outerHTML setter = function (str) {
        var r = this.ownerDocument.createRange();
        r.setStartBefore(this);
        var df = r.createContextualFragment(str);
        this.parentNode.replaceChild(df, this);
        return str;
    }
    HTMLElement.prototype.outerHTML getter = function () {
        var r = this.ownerDocument.createRange();
        r.setStartBefore(this);
        return ???;
    }
}
</SCRIPT>
E in questo modo credo di essere riuscito ad ottenere un range che "punta"
al nodo che mi interessa, però non sono riuscito a trovare nessun metodo che
mi restituisca l'html corrispondente al range in questione (quello che
dovrei mettere al posto dei punti esclamativi).
Qualcuno mi può aiutare? E' la strada giusta? (ho già controllato
extractContents e toString ma non sono i metodi che fanno per me, a me serve
l'html!)
Grazie, ciao!

Ecco dove ho trovato le informazioni di cui parlo nel post padre:
http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20574517.html
(cercare "getouterhtml" per trovare il codice JavaScript di esempio)

 funzione).
Dato il codice, credo di capire a che articolo ti riferisci, e non 
l'hai letto con la dovuta attenzione. Come prima cosa infatti, dice:
"First create a function called getOuterHTML(node) that returns the 
outer HTML code. This is done by recreating the tag using 
element.tagName and looping over element.attributes. Then we loop over 
all childNodes and add their outer HTML and finally we add the end tag. 
In these functions we need to find what kind of node we are at 
(TextNode, ElementNode, EntityReference, CommentNode and maybe even a 
ProcessInstruction node). Take a look at the Node documentation in the 
W3C DOM level 1 core."
E poco sotto c'e' un link che nasconde/rende visibile il codice 
"svolto" (che non riporto qui in quanto non e' brevissimo).
Dato tutto il processo di iterazione che descrive, ne puoi dedurre come 
non sia affatto performante e utile al tuo scopo.
Come ti sugerii la scorsa volta, ti consiglio di cambiare approccio, 
usare le API del W3C cambiando eventualmente algoritmo, ottimizzando il 
codice laddove possibile.
-- 
C'ya,
  ZER0 :: coder.gfxer.webDesigner();
"When you have eliminated the impossible, whatever remains,
however improbable, must be the truth." (S.H.)

 (cercare "getouterhtml" per trovare il codice JavaScript di esempio)
Il "fanciullo" in questione (mi riferisco a chi ha scritto quel 
messaggio) ha malamente copiato cio' che viene scritto in questo 
articolo:
http://webfx.nu/dhtml/mozInnerHTML/mozInnerHtml.html


Grazie Zer0...
Adesso mi tornano i conti!
E sono giunto alla conclusione che utilizzo solo il "setter"!!!
In realtà lo sapevo già da prima, io ho solo la necessità di sostituire il
codice di un certo elemento html con dell'altro, non mi interessa poter
recuperare il codice html quindi non mi serve il "getter" ma non sarei
riuscito a dormire stanotte se non sapevo perchè non funzionava!  :-)
Comunque un notevole incremento delle performance l'ho ottenuto sia
utilizzando questo outerHTML sia (come hai suggerito tu) rivedendo un
tantino il codice...
Credo d'aver capito come la pensi sull'outerHTML: è una soluzione non troppo
pulita (almeno così la penso io!) però mi ha effettivamente portato a delle
sostanziali migliorie quindi per adesso le mie pagine le lascio "girare"
così...
Grazie ancora di tutto Zer0!
Ciao


Ne parlava DEV di questo mese....
HTMLElement.prototype.__defineGetter__(
    "outerHTML",function() {
 var s="";
 switch (this.nodeType) {
  case 1: // ELEMENT_NODE
   s+="<"+this.nodeName;
   for (var j=0, len=this.attributes.length; j<len; j++)
    with(this.attributes[j]) if(nodeValue != null)
     s+=' '+nodeName+'="'+nodeValue+'"';
   s+=this.childNodes.length==0
      && this.nodeName.match(/\$(IMG|HR|BR|INPUT|LINK)^/i)
      ?'/>':'>'+this.innerHTML+'</'+this.nodeName+'>';
   break;
  case 3: //TEXT_NODE
   s+=this.nodeValue;
   break;
  case 4: // CDATA_SECTION_NODE
   s+='<![CDATA[' +this.nodeValue+']]>';
   break;
  case 5: // ENTITY_REFERENCE_NODE
   s+='&'+this.nodeName+';'
   break;
  case 8: // COMMENT_NODE
   s+='<!--' + this.nodeValue + '-->';
   break;
 }
 return s;
});
HTMLElement.prototype.__defineSetter__(
    "outerHTML",function(s) {
 var r=this.ownerDocument.createRange();
 r.setStartBefore(this);
 var frag=r.createContextualFragment(s);
 this.parentNode.replaceChild(frag,this);
 return s;
});
Ciao, Carlop.

 Ne parlava DEV di questo mese....
[cut]
Quale, quello con gli articoli su come sviluppare su PS2?
Cmq dato il codice, mi pare che abbia attinto allo stesso articolo che 
ho postato nel messaggio precedente.
