Cos’è il DOM

DOM
Tempo di lettura: circa 3 minuti.

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.

MagazzinoPensa 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.

Alla prossima

Immagini:
Nick Saltmarsh

9 Commenti

  • avatar image piero 01 Gen 2017 Reply

    io personalmente non ci ho capito una MAZZA ….insomma che è sto DOM?? Come lo spieghi tu lo possono capire solo quelli come te e non lo smanettone come lo chiami tu…..

    • avatar image Shad 05 Gen 2017 Reply

      Ciao Piero,
      mi dispiace non essere stato chiaro per te. Purtroppo si tratta di un argomento difficile da sviscerare e rendere semplice a tutti. Posso però cercare di aiutarti se hai domande su qualcosa di specifico.

  • avatar image Pierpaolo 15 Mag 2017 Reply

    Bella spiegazione grazie 🙂

    • avatar image Shad 15 Mag 2017 Reply

      Grazie!

  • avatar image Francesco 07 Mar 2018 Reply

    Ma non spieghi niente…
    ti fai da solo la domanda “Quindi cos’è il DOM?” e rispondi con Javascript

    • avatar image Shad 07 Mar 2018 Reply

      Ciao Francesco, grazie per il tuo commento. Probabilmente però non hai letto bene l’articolo (che può piacere o meno per carità!).
      Perché alla auto-domanda, chiamiamola così, “cos’è il DOM?” rispondo immediatamente “assolutamente no”.
      Detto questo ribadisco che posso capire se l’articolo non ti è piaciuto. Non mi sento bravo e non sono un esperto nella scrittura su blog, ma di sicuro non ho detto che il DOM è JavaScript.

      Saluti

    • avatar image Mario 04 Mag 2018 Reply

      “Quindi cos’è il DOM? E’ Javascript?
      Assolutamente no! Attenzione a non confondere il Document Object Model con Javascript.”
      Le parole sono quei buffi caratteri tra gli spazi bianchi!! 🙂

  • avatar image Marco Cattaneo 09 Giu 2018 Reply

    Interessante. Mi hai aperto una finestra sul mondo della programmazione. cercherò di giocare un poco con firebug . ciao

    • avatar image Shad 11 Giu 2018 Reply

      Grazie e fammi sapere come va.

Aggiungi un commento

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.