Il Javascript è un linguaggio profondamente integrato col browser e con la struttura html delle pagine web. Come abbiamo avuto modo di vedere più volte, l'html fornisce l'interfaccia su cui il codice JS può agire.
In questo gruppo di lezioni cercheremo di analizzare più approfonditamente i meccanismi con cui avviene tale interazione. Quando una pagina html viene visualizzata in un browser, il browser analizza la pagina stessa e costruisce automaticamente un modello della struttura del documento aperto, detto Document Object Model o Document Object Map (DOM).
Il DOM costituisce una evoluzione e standardizzazione del BOM (Browser Object Map), di cui abbiamo parlato nelle precedenti lezioni. E' importante notare che l'uso del DOM non si limita ai browser web e al JS, dal momento che esso costituisce lo standard per la rappresentazione più generale dei documenti in formato XML.
Definito rigorosamente il DOM è un insieme di API, cioè un'interfaccia generale e indipendente dal linguaggio che permette a programmi e script di accedere e di modificare dinamicamente la struttura, il contenuto e lo stile di un documento. Si tratta in sostanza di uno standard non specifico di Javascript o del linguaggio html, ma di un modello di rappresentazione generale valido per tutti i documenti scritti secondo la sintassi XML. Senza voler approfondire qui l'argomento, possiamo dire che il DOM è un modo generico e standardizzato per la descrizione e la rappresentazione di un documento strutturato. Tale generalità del DOM ne costituisce anche forse uno dei suoi maggiori limiti, in quanto non tutte le sue caratteristiche risultano adeguatamente ottimizzate e adattate all'uso del Javascript.
Il DOM non è un linguaggio di programmazione, ma senza di esso, il linguaggio Javascript non avrebbe alcun modello o alcuna nozione di una pagina web, nè, tantomeno, degli elementi di cui usualmente si occupa. Ogni elemento, all'interno di un documento - il documento stesso, nel suo insieme, l'intestazione (head), le tabelle, gli header delle tabelle, i testi inseriti nelle celle delle tabelle - è parte del modello DOM creato per quel documento e può, quindi, essere raggiunto e manipolato, utilizzando DOM ed un linguaggio di programmazione (come Javascript).
Per cercare di fare un paragone che può aiutare forse a capire meglio, il browser, nel realizzare il DOM, si comporta come un geografo che, nell'analizzare un territorio, ne ricostruisce le caratteristiche essenziali (linee costiere, catene montuose, strade, città, fiumi, etc.) e le mostra su una carta geografica. Il DOM è una sorta di mappa del documento aperto che il browser mette automaticamente a disposizione del codice Javascript. A differenza però di una carta geografica, che si limita a rappresentare un territorio, il DOM consente al JS di agire sul codice html, modificando a piacere la struttura e l'aspetto della pagina visualizzata.
Il DOM rappresenta il documento Html per mezzo di una struttura detta "ad albero". Per capire meglio di cosa si tratta, consideriamo la seguente semplice pagina di esempio:
<html>
<head>
<title>My home page</title>
</head>
<body>
<h1>My home page</h1>
<p>Hello, I am Giancarlo and this is my home page.</p>
<p>I also wrote another site
<a href="http://www.elemania.altervista.org">here</a>.
</p>
</body>
</html>
Possiamo rappresentare la nostra pagina per mezzo della seguente struttura ad albero:
Gli elementi della pagina (html, head, body, title, etc.) si dicono nodi dell'albero e sono collegati fra di loro da frecce dette rami. Se un elemento è contenuto in un altro elemento, si dice che è figlio (child) di questo elemento, il quale a sua volta è genitore (parent) dell'elemento figlio. Per esempio head è genitore di title e title è figlio di head. Gli elementi che hanno uno stesso genitore (come per esempio head e body) si dicono sibling (fratelli).
Il nodo a cui fanno capo tutti gli altri (l'unico che non ha genitore) si chiama radice (root) dell'albero. Nel nostro caso la radice è l'elemento html. Per convenzione si fa riferimento alla radice dell'albero col nome document.
Infine i nodi che non hanno figli (rappresentati in colore grigio nella figura precedente) si chiamano nodi terminali o foglie dell'albero.
Una cosa importante da notare che i nodi non sono solo gli elementi della pagina html ma anche i testi (contenuti in un elemento) e gli eventuali attributi di un elemento. Questi nodi (testi e attributi) sono evidentemente nodi terminali di un albero, in quanto non possono essere genitori di altri nodi.
In pratica ogni nodo della pagina costituisce un oggetto, potenzialmente dotato di metodi e di proprietà. Osserviamo che fra le proprietà di un nodo ci sono tutti gli oggetti child del nodo stesso (abbiamo qui in sostanza una gerarchia di oggetti).
precedente
Sito realizzato in base al template offerto da
http://www.graphixmania.it
