Nell’articolo precedente abbiamo scoperto la struttura gerarchica che compone un modello DOM. In questo odierno vedremo come accedere ai vari nodi. Per chi ha conoscenza di CSS (cascade style sheet o fogli di stile in italiano) troverà molte analogie concettuali con il modello DOM.
Utilizzo degli ID.
Per chi “traffica” con CSS si sarà sicuramente imbattuto in elementi univoci, un tipo utilizzo è l’elemento DIV seguito da uno specifico ID.
<div id="idUnivoco">..</div>
L’ID quindi permette di “marcare” uno specifico TAG, in questo caso è compreso all’interno della parte HTML del documento, in altri casi può non essere così. Per poter permettere a JavaScript di intercettare questo elemento si utilizza il metodo getElementById che è disponibile solo per il nodo document.
Si noti come anche i metodi utilizzino le maiuscole minuscole in modo pressoché identico alle variabili. La prima lettera è minuscola, poi le altre che indentificano la parola iniziano con una maiuscola. Sarà bene ricordarsi di questo particolare.
Come parametro di questo metodo si può fornire la stringa che va ad intercettare il valore di ID.
//intercetto il tag ID
var variabile = document.getElementById("idUnivoco");
E’ anche possibile offrire l’attributo ID a molteplici TAG, in questo caso le azioni che andranno ad operare potrebbero causare effetti non voluti. Per questo è meglio sforzarsi a specificare un ID univoco almeno per ogni tipologia di TAG che si intende utilizzare, ovvero per paragrafi, titoli, link eccetera.
Nel caso l’elemento venga rimosso dalla pagina HTML o venga chiamato in modo errato, JavaScript ritorna il valore NULL, ovvero valore nullo, dopodiché essendo di fatto un errore, il programma terminerà la propria esecuzione. Per ovviare a questo problema ci vengono in aiuto i metodi di iterazione che abbiamo visto in un articolo precedente, e quindi potremo ad esempio espandere il nostro esempio sopra in:
var variabile = document.getElementById("idUnivoco");
if (variabile != null){
//farò qualcosa
}
E se non abbiamo l’ID ma solo i TAG?
Tutto bello, però nel caso dovessimo intervenire su un documento corposo non è che possiamo mettere ID in ogni nodo che ci capita a tiro. Ci viene in aiuto un altro metodo che si chiama getElementsByTagName e come si può intuire dal nome intercetta tutti i TAG. Un esempio che possiamo fare è quello dell’elenco indentato che in HTML fa uso dei tag [textmarker color=”CFCFCF”] <UL></UL> e <LI></LI> [/textmarker]. Il metodo sopra citato ci permetterà all’interno di uno specifico nodo di trattare tutti i dati contenuti all’interno di esso.
Facciamo un esempio pratico.
<ul>
<li>contenuto 1</li>
<li>contenuto 2</li>
<li>contenuto 3</li>
</ul>
in base a questo estratto in HTML potremo produrre una variabile JS che interccetta tutti i “li“:
// cerco il tag html
var listato = document.getElementsByTagName("li");
In questo caso il contenuto di listato sarà contenuto1, contenuto2 e contenuto3. Se fate caso di fatto questo è un Array! E di fatto il metodo getElementsByTagName tratta i dati nello stesso modo. Quindi facendo riferimento all’articolo sugli Array potremo ad esempio estrapolare il contenuto del secondo nodo:
var listato = document.getElementsByTagName("li");
var secondoNodo = listato[1];
Sempre in riferimento all’Array potremo voler conoscere quanti nodi è composto questo TAG
var listato = document.getElementsByTagName("li");
var numeroNodi = listato.length;
Il fatto che un elenco di nodi sia trattato come un Array semplifica in modo davvero esponenziale le cose.
Questo metodo, a differenza di getElementById, nel caso venga richiamato un TAG che non è presente nel documento non darà come risultato NULL, ma bensì darà zero. Di fatto quindi non si genera un errore, tuttavia è necessario introdurre delle istruzioni che ne controllino la lunghezza e solo attraverso un ciclo condizionale attuare la parte di codice operativa.
var listato = document.getElemenstByTagName("li");
if (listato.length > 0){
//farò qualcosa
}
E nel caso abbiamo più corrispondenze?
Eh si, non è affatto inusuale trovare una pagina con più liste indentate. Se attuassimo il metodo visto fino ad ora ci ritroveremo un Array di dati di tutte le liste. Cioè se abbiamo una lista di mele, e una di pere, ci troveremo una macedonia..
Però i listati, che abbiamo cercato attraverso il tag “li” sono racchiusi dal tag genitore “ul”. E questo è un elemento che ci permette di diversificare la ricerca all’interno dell’array. Passiamo alla pratica, abbiamo i seguenti listati nella pagina:
<ul>
<li>gruppo 1 contenuto1</li>
<li>gruppo 1 contenuto2</li>
<li>gruppo 1 contenuto3</li>
</ul>
<ul>
<li>gruppo 2 contenuto1</li>
<li>gruppo 2 contenuto2</li>
<li>gruppo 2 contenuto3</li>
</ul>
<ul>
<li>gruppo 3 contenuto1</li>
<li>gruppo 3 contenuto2</li>
<li>gruppo 3 contenuto3</li>
</ul>
Come vediamo sono tre gruppi di listati dal tag “ul“, ognuno con tre elementi listati dal tag “li“. Abbiamo detto che getElementsByTagName di fatto si comporta come un Array, e proprio da questo concetto andremo a cercare di suddividere prima i tre gruppi, poi grazie a questo cercare il contenuto di quello che ci interessa. Ad esempio il contenuto del secondo gruppo.
var listatoGruppi = document.getElementsByTagName("ul");
var secondoGruppo = listatoGruppi[1];
var secondoGruppoLista = secondoGruppo.getElementsByTagName("li");
Vorrei porre l’attenzione sul fatto che listatoGruppi utilizza il metodo document, poiché il metodo getElementsByTagName fa parte del modello DOM, tuttavia questo può essere non (del tutto) vero nel caso della variabile SecondoGruppoLista. Infatti eredita di fatto un modello DOM a ritroso, dato che la variabile SecondoGruppo richiede il secondo gruppo di un modello document compliant.
Conclusioni.
Javascript, grazie al fatto che è compatibile con le linee guida del modello DOM, permette di andare a leggere il contenuto di una pagina HTML, e con la dovuta pratica saremo in grado di agire in ognuno dei nodi che la compone. Vedremo nel prossimo articolo ulteriori tipi ricerche all’interno del modello DOM con altri metodi.
