What is this? From this page you can use the Social Web links to save Introduzione DOM e Javascript to a social bookmarking site, or the E-mail form to send a link via e-mail.

Social Web

E-mail

E-mail It
April 07, 2007

Introduzione DOM e Javascript

Posted in: Design, Programmazione, Risorse

La sinergia DOM e Javascript, tecnologie alla base di AJAX (Asynchronous JavaScript and XML), insieme ai fogli di stile permette la creazione di interfacce utente Web interattive e accattivanti, vediamo quindi di introdurne i principi fondamentali.

DOM
Il Document Object Model (DOM) è un insieme di interfacce di programmazione (API) che forniscono un modello strutturato per documenti XML e dialetti derivati, come XHTML (ovviamente anche HTML), nata dal lavoro del World Wide Web Consortium (W3C).

Prendiamo una pagina HTML può essere vista in un browser o il rispettivo codice sorgente in un editor di testo, in entrambi i casi è un documento a cui il DOM fornisce una rappresentazione equivalente fatta di nodi e oggetti ai quali attribuisce proprietà  e metodi.

Consideriamo un paragrafo di una ipotetica pagina HTML:

PLAIN TEXT
HTML:
  1. <p align="center">
  2.    <strong>Lorem</strong> ipsum dolor sit amet...
  3. </p>

può essere rappresentato con il seguente albero DOM:

Esempio albero DOM.

Esistono element nodes, text nodes and attribute nodes e altri ancora ( comment nodes per esempio ), da notare che tra i nodi ci sono precise relazioni di parentela, nell'esempio riportato il nodo P è padre del nodo STRONG e del nodo di testo, questi ultimi quindi sono fratelli.

Per approfondire i dettagli delle specifiche DOM niente di meglio che leggerle direttamente sul documento ufficiale W3C.

Javascript
Ora passiamo al lato puramente programmativo, Javascript implementa nativamente le API DOM. Incorpora nell'oggetto document appunto l'albero DOM della pagina HTML corrente. Quindi di seguito un po' di codice Javascript esemplificativo.

Navigare l'abero DOM

PLAIN TEXT
JavaScript:
  1. /*ottenere il nodo <strong>*/
  2. var strong = document.getElementsByTagName('STRONG')[0];
  3.  
  4. /*raggiunre il nodo <strong>*/
  5. var p = strong.parentNode;
  6.  
  7. /*infine il text node*/
  8. var nodeList = p.childNodes;
  9. var testo_semplice = nodeList[1];

NB: nel caso delle liste di nodi, sconsiglio di usare gli indici per raggiungere il nodo desiderato, poichè gli a capo vengono codificati come text node e potremmo quindi sbagliare i conti.

Modificare l'albero DOM
e quindi il relativo documento HTML.

PLAIN TEXT
JavaScript:
  1. /*modificare il nodo <strong>*/
  2. strong.firstChild.nodeValue='ModLorem';
  3.  
  4. /*eliminare il nodo <strong>*/
  5. p.removeChild(strong);
  6.  
  7. /*creare un nuovo nodo <u>Lorem</u>*/
  8. var u = document.createElement('U');
  9. var testo = document.createTextNode('Lorem');
  10. u.appendChild(testo);

Per avere i dettagli completi vi consiglio di visionare la Gecko DOM Reference.

In questo articolo ho voluto introdurre le basi concettuali che sostengono le applicazioni che prossimamente vi mostrerò! ;)

Return to: Introduzione DOM e Javascript