Recuperare gli elementi

Cominciamo ora a mettere in pratica ciò che è stato descritto finora. In questa sezione analizzeremo dei piccoli tutorial per mostrare come usare i metodi e le proprietà precedentemente definite, utilizzandoli per qualche piccolo esempio.

In questa pagina, vengono utilizzati i metodi di document relativi al recupero degli elementi nella pagina, cioè: getElementById e getElementsByTagName.

Consideriamo la seguente tabella:

il cui codice è:

<table border="1">
 <tr>
  <td>cella 0</td>
  <td>cella 1</td>
  <td>cella 2</td>
 </tr>
 <tr id="r3">
  <td id="c3">cella 3</td>
  <td>cella 4</td>
  <td>cella 5</td>
 </tr>
</table>

A questo punto, utilizzando il DOM W3C, abbiamo due modi per recuperare e manipolare un elemento: getElementById (se ha l'attributo ID) e getElementsByTagName.

Il primo passo è sempre quello di verificare se gli oggetti siano supportati, dopodiché cerchiamo la cella con l'ID pari a "c3".

Con getElementById il compito sarà semplice:

if(document.getElementById) {
 cella = document.getElementById("c3")

 // cella contiene un riferimento all'elemento
 // con id="c3"
}

Con getElementsByTagName recuperare un singolo elemento non è così facile: occorre scorrere l'array degli elementi caratterizzati dallo stesso tag dell'elemento cercato finché non si trova quello il cui valore dell'attributo id coincide con quello voluto.

Ricordiamoci sempre di eseguire la rilevazione dell'oggetto usato, il codice sarà:

if(document.getElementsByTagName) {

 var lista_td = document.getElementsByTagName("td");

 for(i=0; i < lista_td.length; i++)
  if(lista_td.item(i).getAttribute("id") == "c3")
   cella = lista_td.item(i);

 // alla fine del ciclo for
 // cella contiene un riferimento
 // all'elemento con id="c3"

 alert(cella.getAttribute("id"))
}

Si vede subito la maggiore difficoltà del secondo script, dovuta al fatto che la funzione di getElementsByTagName viene, per così dire, snaturata. Nonostante tutto, però questo secondo codice può tornare utile quando si cerca un elemento caratterizzato dal valore di una proprietà diversa da ID (si pensi di voler cercare un link con un particolare valore dell'attributo HREF, ad esempio).

Nota: Nell'esempio precedente abbiamo usato la sintassi conforme alle specifiche del DOM level 1 Core del W3C, ma nessuno vieta di scrivere lo stesso codice, con le seguenti modifiche:

if(document.getElementsByTagName) {
 
 for(i=0; i < document.getElementsByTagName("TD").length; i++)
  if(document.getElementsByTagName("TD")[i].id == "c3")
   cella = document.getElementsByTagName("TD")[i];

 // cella contiene un riferimento
 // all'elemento con ID="c3"
 alert(cella.id);
}

Anche questa sintassi è conforme agli standard (W3C HTML level 1). È consigliabile, in generale, usare la sintassi W3C, per questioni di compatibilità, anche futura delle vostre pagine, a discapito di una probabile prolissità del codice, rispetto ad altre sintassi di proprietà di specifici browser.

Passiamo ora ad un uso incrociato più intelligente di entrambi i metodi e cerchiamo di modificare il colore del testo di tutte le celle della seconda riga:

colore = new Array("red","orange","green");

function colore_celle() {
 if(document.getElementById && document.getElementsByTagName) {
  celle = document.getElementById("r3").getElementsByTagName("td");
 
  for(i=0; i < celle.length; i++)
   celle.item(i).style.color = colore[i];
 }
}

controlliamo

Usiamo getElementById per recuperare subito la riga d'interesse, senza scandire nessuna lista e getElementsByTagName per scorrere facilmente tutti i tag TD contenuti dentro l'elemento recuperato dal metodo precedente.

Emergono due aspetti importanti:

• il primo è che getElementsByTagName non è applicabile solo a "document", ma a qualsiasi elemento,
• il secondo è che una volta applicato all'elemento di interesse ritorna solo la lista di elementi del tag specificato contenuti nell'elemento in questione.

Tutto ciò, se sfruttato in fase di progettazione della pagina, semplificherà notevolmente la stesura degli script.

Come ultima cosa torniamo ancora una volta a notare l'uso corretto della rilevazione d'oggetto, che verifica la presenza dei metodi che andremo ad usare.