L’articolo di oggi non verte propriamente su JavaScript, ma faremo una breve introduzione al DOM, acronimo di Document Object Model. Si tratta di una specifica del consorzio W3C descritta nella pagina ufficiale, dove si tratta una piattaforma di linguaggio-neutrale che possa permettere agli scripts (quindi potenzialmente non solo JavaScript) di accedere ed aggiornare il contenuto, la struttura e lo stile di un documento HTML. O meglio di un documento Dynamic HTML, come lo chiama il consorzio, per differenziarlo da un documento prettamente statico, anche se le differenze come vedremo non sono poi molte. Negli articoli futuri comprenderemo come JavaScript sarà in grado di manipolare a proprio piacimento una pagina. Sarà anche parecchio divertente!
Conosciamo la struttura del DOM.
La parte fondamentale è comprendere come si struttura un DOM. Abbiamo già visto in precedenza che JavaScript va dichiarato nel mezzo dei tag [textmarker color=”CFCFCF”] <HEAD></HEAD> [/textmarker] che a loro volta sono racchiusi in altri TAG, ad esempio quello superiore è il tag [textmarker color=”CFCFCF”] <HTML></HTML> [/textmarker]. Perché superiore? perché i TAG sono nidificati. Sarà molto importante saperli riconoscere e leggere. Molti editor permettono ad esempio tramite indentazioni e colorazioni di facilitare questo processo cognitivo.
In una visione rappresentata graficamente come quella qui sopra, ognuno di questi tag genera un NODO, che può essere genitore ed avere dei NODI figli. Questi nodi possono essere generalizzati o possono anche essere unici attraverso un identificativo. Tuttavia il consorzio indica i nodi di tre tipi, TAG o elementi, TESTUALI e ATTRIBUTI.
Nodi TAG.
Piuttosto facile riconoscerli, sono quelli racchiusi dalle parentesi [textmarker color=”CFCFCF”] < > [/textmarker] e generalmente sono elementi tipici dell’HTML. Prima ne abbiamo indicati chiaramente due, Head e HTML.
Nodi Testuali.
Si può generalizzare dicendo che il nodo testuale sia il corpo di un articolo, ovvero il contenuto di testo, compresi i caratteri invisibili come eventuali a capo, tabulazioni o spazi forzati. Nella pratica tutto ciò che non è racchiuso in parentesi [textmarker color=”CFCFCF”] < > [/textmarker] è un nodo testuale. Inoltre i nodi testuali non possono avere figli, ma dipendono dai nodi TAG. Ultimo ma non meno importante il fatto che ogni nodo testuale ha un suo valore che eredita direttamente dal nodo TAG di riferimento.
Nodi Attributo.
I nodi attributi, come vedremo a breve non sono veramente dei nodi. Sono dipendenti dai nodi TAG, e si possono brevemente indicare come gli attributi di questi ultimi. Ad esempio il tag che serve a creare il link, ovvero A, avrà come attributi HREF per indicare la URL e/o TARGET per indicare come si deve comportare il link. Va specificato che il nodo attributo non è associato al modello DOM, poiché esso non è un nodo vero e proprio, e non è associabile come “figlio” di un nodo superiore, tuttavia ha delle peculiarità che in JavaScript, come in CSS, possono essere intercettate e manipolate. Per questo non è possibile ignorarne la loro presenza.
Conclusioni.
L’articolo di oggi come citato all’inizio, esula da Javascript, tuttavia gli articoli che ne seguiranno avranno una fortissima influenza su questo poiché vedremo come il linguaggio di programmazione sarà in grado di intercettare i nodi, fin nel profondo del documento ed operare in modi interessanti che avremo modo di approfondire.
