Dom e Javascript

Cosa è il DOM?
DOM è un acronimo che sta per Document Object Model ed in linea di massima descrive come è costituita una pagina web o una pagina strutturata (XML, HTML o markup simili).
Javascript ci offre una serie di strumenti per modificare la composizione di una pagina HTML.
Cosa? Non ci credete? Si, è così, Javascript può aiutarci a trasformare quelle che ci sembrano pagine statiche in pagine dinamiche ed interattive.
Applicandoci un po’ potremo addirittura creare vere e proprie applicazioni web mono-pagina, avrete sentito già parlare di queste tecniche sotto il nome di AJAX.
Ebbene il DOM e Javascript sono alla base delle tecniche AJAX (Asynchronous Javascript and Xml).

Cosa ci permette di fare il DOM?
Con il DOM si può modificare qualsiasi cosa di una pagina web: dagli stili (CSS) applicabili ad un tag ai suoi attributi, dal suo contenuto alla sua posizione nella pagina.

Requisiti
Per poter comprendere questa mini-guida bisogna avere delle basi di Javascript e Html o di altri linguaggi di markup

Recuperare gli elementi dal DOM
Per recuperare un determinato elemento in una pagina, si ricorre al suo ID cioè all’atributo “ id = “ che inseriamo quando costruiamo la pagina.
Javascript ci offre una funzione per recuperare questi elementi:

var element = document.getElementById(’id’);

Dove ‘id’ è l’identificativo assegnato al TAG HTML da noi voluto.

Impostare e leggere gli attributi dell’elemento
Una volta recuperato l’elemento, possiamo leggere o scrivere i suoi attributi (class,href,src,width,size,value) mediante i metodi

element.getAttribute( ‘nome_attributo’ );

e

element.setAttribute( ‘nome_attributo’ , valore );

Modificare il contenuto di un elemento
Per modificare il contenuto di un elemento basta usare l’attributo innerHTML in questo modo

element.innerHTML = “nuovo contenuto dell’elemento element”;

Ovviamente il contenuto si potrà modificare solo a determinati tag (così come anche gli attributi) .

 

 

Piccola prova pratica
Ed ecco un “riassunto” di quanto detto finora per farvi comprendere la semplicità d’uso del DOM.

Con questo esempio introdussi l’argomento al mio amico RobyConte durante la pausa pranzo del BarCamp:

 

<script language=”JavaScript”>

function addRow(text)
{
var testo = document.getElementById(’testo’);
testo.innerHTML += text+”<br />”;
}

</script>

<a href=”javascript:addRow(’Nuova riga’)” >Aggiungi una riga</a><br />
<div id=”testo”><div>