Una cosa che mi ha sempre affascinato di Javascript è l'abilità di sintesi e la capacità di manipolare agevolmente elementi di pagina attraverso il DOM.
Ho così pensato di introdurre due piccoli "esperimenti scientifici" ovvero il teletrasporto e la clonazione.
Nel teletrasporto il contenuto di un dato elemento viene interamente trasferito in un secondo elemento grazie ad un link che effettua la chiamata alla funzione DoTransfer che è sorprendentemente breve, appena quattro righe:
function DoTransfer(a,b){
var from=document.getElementById(a), to=document.getElementById(b);
while(from.hasChildNodes())
to.appendChild(from.firstChild);
}
La funzione, dopo aver reperito nel DOM i due elementi individuati dagli id passati come parametro procede a trasferire uno ad uno tutti gli elementi figli dalla sorgente alla destinazione, finché l'elemento di partenza non resta vuoto. La cosa interessante da notare è che in realtà gli elementi trasferiti non vengono esplicitamente rimossi dall'origine, ma lo script funziona. II motivo è semplice, ed è indicato dalle specifiche DOM del W3C: se il nodo usato come parametro di appendChild è presente nell'albero DOM, questo viene prima rimosso.
Nella clonazione il contenuto di un dato elemento viene interamente copiato in un secondo elemento grazie un link che effettua la chiamata alla funzione DoClone, anch'essa molto breve:
function DoClone(a,b){
var from=document.getElementById(a), to=document.getElementById(b);
for(var i=0;i<from.childNodes.length;i++)
to.appendChild(from.childNodes[i].cloneNode(true));
}
In questo caso dato che l'elemento origine non verrà modificato, andrà effettuato un ciclo for su tutti i suoi figli. Per evitare che questi vengano rimossi dalla sorgente prima di inserirli nella destinazione dovremo effettuarne una copia con il metodo cloneNode. Il parametro true è indispensabile: indicherà infatti di copiare ricorsivamente l'intero sottoalbero dell'elemento figlio come indicato nelle specifiche. La collezione childNodes restituisce infatti solo i figli diretti di un elemento.
Questo è tutto per ora: al di là delle applicazioni pratiche dei due esempi credo che possano costituire un ottimo spunto se vi troverete a dover trasferire o copiare elementi di pagina attravero il DOM. Alla prossima.