Fissiamo l'attenzione sul concetto di DOM

(giovedì 1 settembre)

Cos’è il DOM

 

A volte sento dire che questa o quell’altra informazione è superflua o inutile. L’argomento di cui vorrei parlare è appunto uno di quelli spesso bistrattati e considerati poco più di un corollario a quanto già si conosce. Proverò quindi a spiegare cos’è il DOM, in modo che tutti i programmatori lato client possano avere almeno un’idea di questa struttura fondamentale per lo sviluppo web.

Il Document Object Model

per gli amici semplicemente DOM, è una di quelle cose da conoscere bene per poterci costruire sopra. Fa parte di quelle famose basi necessarie a chi vuole essere un professionista e non semplicemente uno smanettone.

Analizzandone il nome possiamo già farci un’idea di cosa si tratta.

Il DOM è un modello ad oggetti per rappresentare un documento.

Pensa ad esempio ad un grande archivio di cose da organizzare, come un magazzino di un supermercato.
Per accedere ad un qualsiasi prodotto, ci sarebbe bisogno di qualcosa che tenga catalogato tutto e lo renda individuabile in qualche modo.
Le soluzioni possono essere varie, ed ognuna sarebbe più efficace rispetto alle altre in un particolare caso.

Supponiamo ad esempio di voler sapere dove di trova un certo prodotto. In una situazione del genere potrebbe essere molto comodo un indice alfabetico che associ ad ogni nome il relativo reparto e la posizione precisa all’interno dello scaffale.
Se invece volessimo conoscere i prodotti più costosi, ci tornerebbe molto più utile una suddivisione per fasce di prezzo.

Quindi cos’è il DOM? Può essere sintetizzato come un insieme di tanti tipi di indici, catalogazioni e più in generale sistemi, che permettono di accedere ai contenuti di un documento strutturato.

Facciamo subito un esempio per capire cosa intendo. Supponiamo di avere una pagina HTML del genere:

 

Possiamo accedere alla prima immagine in svariati modi. Ad esempio:

 

che recupera il primo elemento dell’array images (una proprietà nativa di document).
Ma l’operazione in JavaScript è possibile anche attraverso i seguenti comandi:

 

o tanti altri (pensa ai selettori JQuery).

Quindi cos’è il DOM? E’ Javascript?

Assolutamente no! Attenzione a non confondere il Document Object Model con Javascript. Quest’ultimo è solo un linguaggio che permette l’accesso e la manipolazione del DOM. Infatti attraverso di esso è possibile cambiarlo al volo e di conseguenza modificare la struttura HTML della pagina ma si tratta di una cosa distinta e separata.

Ma a cosa serve avere queste basi?

Sapere cos’è il DOM e averne padronanza è molto utile nello sviluppo di applicazioni web. Conoscere com’è strutturato l’albero degli elementi di una pagina HTML, come accedere ad essi e come manipolarli, significa avere una marcia in più. Significa capire quello che si fa e non saperlo fare e basta.

Personalmente mi sono trovato varie volte a capire come risolvere un problema che qualcun altro vedeva come insormontabile, semplicemente perché conoscevo il Document Object Model. L’altra persona infatti, era costretta a fare prima uno sforzo mentale per ricostruire e padroneggiare la struttura, mentre io potevo concentrarmi sulla risoluzione della questione senza preoccuparmi di assimilare altre informazioni.
Avere queste basi insomma, è stato spesso determinante.

Puntualizzazioni

L’argomento sarebbe ancora molto vasto ma preferisco fermarmi qui specificando però alcune cose:

  • Il consorzio W3C definisce gli standard del Document Object Model ma su ogni browser sono disponibili delle estensioni.
    Quando usarle e quando tenersi nello standard? Dipende.
    Ci sono funzionalità che sono standard di fatto o che sono al vaglio del W3C per essere incluse nelle successive versioni del DOM. In questi casi non ci sono problemi. Eviterei invece quelle situazioni in cui una certa operazione è disponibile per un solo browser (o addirittura una sola versione di esso).
  • Spesso utilizziamo librerie come JQuery per accedere ad elementi del documento che sarebbero facilmente reperibili con Javascript puro, in maniera più semplice, immediata e soprattutto ottimizzata. In pratica sfondiamo una porta con un carro armato, quando quest’ultima è aperta.
  • Browser come Chrome e Firefox mettono a disposizione svariati strumenti, sia nativi che sotto forma di estensioni, per manipolare e accedere “al volo” al DOM. Basti pensare ad esempio a firebug. Questo è utilissimo in fase di sviluppo per provare dei comandi prima di utilizzarli nel codice vero e proprio. Se non l’hai già fatto, installalo e giocaci un po’. Imparerai tanto oltre ad avere un valido alleato durante lo sviluppo.

Spero di averti schiarito un pochino le idee, ma soprattutto con un argomento così vasto, sono lieto di approfondire il discorso nei commenti. Fammi sapere se anche a te è stato utile sapere cos’è il DOM in qualche situazione.

(tratto da www.saveriogravagnola.it)

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *