In questo tutorial verificheremo l'utilizzo degli oggetti e dei comandi innerHTML, innerText, insertAdjacentHTML, outerHTML che consentono di agire in maniera dinamica su porzioni testuali di pagine HTML.
Alcuni metodi commentati in questo articolo non sono compatibili con gli standard DOM del W3C ed utilizzano funzioni eseguibili solamente con Internet Explorer e alcuni altri browser. Per approfondire l'argomento rimandiamo allo Speciale DOM (DOCUMENT OBJECT MODEL) pubblicato sulle pagine di questo sito.
Uno dei concetti fondamentali del DHTML è quello di pensare a qualsiasi elemento di una pagina come un oggetto. Caratteristica degli oggetti è avere delle proprietà e dei metodi. Nel corso di questo articolo andremo ad esaminare alcune proprietà e alcuni metodi che ci permetteranno di modificare il codice HTML di un oggetto.
Per prima cosa bisogna identificare gli oggetti all'interno della pagina. Per farlo si usa l'attributo id che permette di dare un nome ad un elemento della pagina. Ad esempio prendiamo una tabella di 2 righe e 2 colonne:
<table id=tabella>
<tr id=riga1>
<td id=cella1>Cella1</td>
<td id=cella2>Cella2</td>
</tr>
<tr id=riga2>
<td id=cella3>Cella3</td>
<td id=cella4>Cella4</td>
</tr>
</table>
Ad ogni elemento della tabella abbiamo assegnato, attraverso il tag ID=, un nome. Ora è possibile cambiare il colore delle celle sfruttando la proprietà bgcolor dell'oggetto cella. Per fare ciò associeremo alla pressione di un pulsante esterno alla cella un cambiamento di colore di sfondo attraverso il seguente codice:
<input type=button value= "Cella1Rossa"onclick="cella1.bgColor='red'">
<input type=button value= "Cella1Gialla"onclick="cella1.bgColor='yellow'">
Ottenendo questo effetto:
| Cella1 | Cella2 |
| Cella3 | Cella4 |
Attenzione ai nomi delle proprieta, sono case-sensitive.
Con questo semplice esempio abbiamo visto come, dato un elemento di una pagina, sia possibile modificarle l'aspetto. Probabilmente a qualche lettore stanno venendo milioni di idee per applicare i concetti appena visti, ma il bello deve ancora venire.
Oltre a modificare l'aspetto di un elemento, il DHTML ci permette di modificarne il contenuto grazie alla proprietà innerText.
Facciamo un esempio: abbiamo due link e vogliamo far apparire una descrizione di questi link al passaggio del mouse. Il commento apparirà in una zona che identificheremo attraverso un DIV cui assegneremo naturalmente un nome (ID=)
<div id=commento></div>
Nel tag A dei link sfruttando l'evento onmouseover, facciamo apparire una descrizione:
<a href= "http://freeasp.html.it"onmouseover="commento.innerText='Il sito delle ASP'">FreeASP</a>
<a href= "http://freephp.html.it"onmouseover="commento.innerText='Il sito del PHP'">FreePHP</a>
Ottenendo questo effetto:
Volendo complicare un po' quest effetto potremmo fare i commenti di colore diverso:
<a href="http://freeasp.html.it"
onmouseover="commento.innerText= '<font color="red"><strong>Il sito delle ASP</strong></font>'"
>FreeASP</a>
<a href= "http://freephp.html.it"
onmouseover= "commento.innerText='<font color="green"><strong>Il sito del PHP</strong></font> '"
>FreePHP</a>
Purtroppo non si ottiene l'effetto sperato:
Infatti il tag font non viene eseguito ma appare insieme al commento, questo perchè la proprietà innerText non interpreta il codice HTML. Perché funzioni occorre sostituire la proprietà innerText con innerHTML:
Esistono poi le proprità outerHTML e outerText che forniscono il codice HTML oppure il testo contenuto in un oggetto. Applichiamoli all'esempio appena fatto:
<input type="button" value="outerText"
onclick="alert(commento.outerText)" />
<input type="button" value="outerHTML"
onclick="alert(commento.outerHTML)" />
Esistono due metodi che permettono di manipolare il contenuto degli oggetti e sono insertAdjacentText e insertAdjacentHTML. Se le proprietà che abbiamo visto prima operavano una sostituzione, questi due metodi permettono di aggiungere del testo o del codice HTML ad un oggetto in una posizione specificata.
<div id="paragrafo">Questo è un testo fisso</div>
<input type="button" value="insertAdjacentText" onclick="paragrafo.insertAdjacentText ('AfterBegin','Testo aggiunto')">
La sintassi di questo comando prevede un primo parametro ('AfterBegin') che indica la posizione in cui si vuole aggiungere il testo e il secondo parametro ('Testo aggiunto') che prevede il testo da inserire. Le posizioni possibili sono:
- BeforeBegin: posiziona il testo prima dell'elemento
- AfterBegin: posiziona il testo all'inzio dell'elemento ma dentro i tag dello stesso
- BeforeEnd: posiziona il testo alla fine dell'elemento ma dentro i tag dello stesso
- AfterEnd: posiziona il testo fuori dall'elemento al fondo
Facciamo un esempio chiaritore usando come elemento un link. Ecco il codice.
<a id=link href= "http://www.html.it">HTML.IT</a>
<br>
<input type=button value="BeforeBegin "
onclick= "link.insertAdjacentText ('BeforeBegin','BeforeBegin')">
<input type=button value="AfterBegin "
onclick= "link.insertAdjacentText ('AfterBegin','AfterBegin')">
<input type=button value="BeforeEnd"
onclick="link.insertAdjacentText ('BeforeEnd','BeforeEnd')">
<input type=button value="AfterEnd"
onclick="link.insertAdjacentText ('AfterEnd','AfterEnd')">
In modo analogo il comado insertAdjacentHTML permette di inserire oltre al testo del codice HTML. Ora non resta che dar sfogo alla fantasia.
In quest'articolo abbiamo imparato a manipolare gli oggetti testuali attraverso proprietà e metodi del Dynamic HTML. Abbiamo visto come, associando ad un elemento testuale un nome identificativo, sia possibile agire su quel nome modificandone in parte e con facilità gli attributi e la forma.
