Una volta che un elemento o un gruppo di elementi di una pagina sono stati selezionati con document.getElementById, document.getElementsByTagName, document.getElementsByClassName, document.querySelectorAll o document.querySelector, è possibile accedere agli attributi degli elementi selezionati (per usarli o modificarli) in modo molto semplice.
Il meccanismo ci è già noto da tempo, per cui ci limitiamo a fare un semplice esempio riassuntivo:
<html>
<head>
<meta charset="utf-8">
<title> Modifica degli attributi di un elemento </title>
<script>
function scambia()
{
var immagini = document.getElementsByTagName("img");
var tmp1,tmp2;
tmp1 = immagini[0].src;
tmp2 = immagini[0].alt;
immagini[0].src = immagini[1].src;
immagini[0].alt = immagini[1].alt;
immagini[1].src = tmp1;
immagini[1].alt = tmp2
}
</script>
</head>
<body>
<p>Passa col mouse sulle immagini per scambiarle: </p>
<p><img src="pippo.gif" onmouseover="scambia()" alt="pippo" ></p>
<p><img src="pluto.gif" onmouseover="scambia()" alt="pluto" ></p>
</body>
</html>
La funzione scambia() viene invocata quando si passa il mouse (evento onmouseover) su una delle due immagini ed effettua lo scambio delle due immagini. Lo scambio avviene scambiando i valori degli attributi src e alt delle due immagini (attraverso le variabili temporanee tmp1 e tmp2).
ATTENZIONE: l'attributo a cui si accede deve essere un attributo valido per quel dato elemento. Non è possibile aggiungere attributi "inventati" a un elemento usando questo metodo.
In modo analogo è possibile accedere e modificare lo stile di un elemento. L'argomento è stato già trattato in precedenza, per cui ci limitiamo qui ad un semplice esempio:
<html>
<head>
<meta charset="utf-8">
<title> Modificare gli stili di un elemento </title>
<script>
var a = 255;
var b = 0;
var c = 0;
var tmp;
function scambia()
{
document.getElementById("sfondo").style.backgroundColor = 'rgb(' + a + ',' + b + ',' + c + ')';
document.getElementById("sfondo").style.color = 'rgb(' + b + ',' + c + ',' + a + ')';
tmp = a;
a = b;
b = c;
c = tmp;
}
</script>
</head>
<body onmouseover="scambia()" id = "sfondo">
<p>Passando col mouse, cambia il colore di sfondo e del primo piano</p>
</body>
</html>
La funzione scambia viene invocata sul body passandoci sopra il mouse. Essa modifica gli stili del colore di sfondo style.backgroundColor e del colore di primo piano style.color scambiando i valori della terna rgb (rosso, verde, blu).
Si noti che sia style.backgroundColor che style.color richiedono il passaggio di una stringa e questo spiega l'uso degli apici nell'uso di rgb.
Nonostante class sia un attributo universale, non è possibile accedervi con la seguente sintassi (sbagliata!!):
document.getElementById("nome_id").class = "nome_classe"
Bisogna invece usare className, come nell'esempio seguente
document.getElementById("nome_id").className = "nome_classe"
Per esempio il ciclo seguente assegna la classe di nome "bordo" a tutte le celle td di una tabella:
document.getElementsByTagName("td")[i].className="bordo";
Osserviamo di passaggio che, in modo abbastanza sorprendente, è invece possibile accedere e modificare l'attributo id di un elemento come un normale attributo:
document.getElementById("nome_id").id = "nuovo_nome_id"
Anche la possibilità di modificare il testo contenuto in un elemento contenitore (es. un paragrafo) è già stata discussa, per cui ci limitiamo a fornire un semplice esempio:
<html>
<head>
<meta charset="utf-8">
<title> Modificare il contenuto degli elementi </title>
<script>
function scambia()
{
lista = document.getElementsByTagName("li");
tmp = lista[0].innerHTML;
for (i=0;i<lista.length-1;i++)
{
lista[i].innerHTML = lista[i+1].innerHTML;
}
lista[i].innerHTML = tmp;
}
</script>
</head>
<body>
<p>Passando col mouse cambia la lista</p>
<ol onmouseover="scambia()">
<li>Primo</li>
<li>Secondo</li>
<li>Terzo</li>
<li>Quarto</li>
</ol>
</body>
</html>
Passando col mouse sulla lista <ol> il contenuto degli elementi <li> (cioè i valori Primo, Secondo, Terzo e Quarto) vengono scambiati ciclicamente.
Il metodo nodeName consente di accedere al nome di un nodo. Per esempio se "para" è l'identificatore di un paragrafo P, il codice seguente visualizza "P" (maiuscolo):
alert(paragrafo.nodeName)
Se il nodo è un nodo di testo viene restituito il valore #text; se si tratta di un commento, il valore è #comment; per i nodi di tipo attributo, viene restituito il valore dell'attributo.
E' interessante notare che è possibile usare i diversi metodi per selezionare gli elementi in modo combinato. Si consideri l'esempio seguente:
<html>
<head>
<meta charset="utf-8">
<title> Uso combinato di due selettori </title>
<script>
function bordo()
{
var tabella = document.getElementById("tab1");
var celle = tabella.getElementsByTagName("td");
for (i=0; i < celle.length; i++)
celle[i].style.borderStyle = "dotted"
}
</script>
</head>
<body onclick = "bordo()">
<p>Tabella 1</p>
<table style="border-collapse: collapse" id = "tab1">
<tr> <!-- INIZIO PRIMA RIGA -->
<td style="border: 1px solid"> Prima cella della prima riga </td>
<td style="border: 1px solid"> Seconda cella della prima riga </td>
<td style="border: 1px solid"> Terza cella della prima riga </td>
</tr> <!-- FINE PRIMA RIGA -->
<tr> <!-- INIZIO SECONDA RIGA -->
<td style="border: 1px solid"> Prima cella della seconda riga </td>
<td style="border: 1px solid"> Seconda cella della seconda riga </td>
<td style="border: 1px solid"> Terza cella della terza riga </td>
</tr> <!-- FINE SECONDA RIGA -->
</table>
<p>Tabella 2</p>
<table style="border-collapse: collapse" id = "tab2">
<tr> <!-- INIZIO PRIMA RIGA -->
<td style="border: 1px solid"> Prima cella della prima riga </td>
<td style="border: 1px solid"> Seconda cella della prima riga </td>
<td style="border: 1px solid"> Terza cella della prima riga </td>
</tr> <!-- FINE PRIMA RIGA -->
<tr> <!-- INIZIO SECONDA RIGA -->
<td style="border: 1px solid"> Prima cella della seconda riga </td>
<td style="border: 1px solid"> Seconda cella della seconda riga </td>
<td style="border: 1px solid"> Terza cella della terza riga </td>
</tr> <!-- FINE SECONDA RIGA -->
</table>
</body>
</html>
Nella pagina sono presenti due tabelle, contrassegnate con due diversi id: tab1 e tab2.
Cliccando col mouse sul body viene attivata la funzione bordo(), la quale per prima cosa seleziona la tabella tab1:
Quindi vengono selezionate tutte le celle (elementi <td>) della tabella tab1:
Si noti che il metodo getElementsByTagName("td") non viene in questo caso applicato all'oggetto document, ma all'oggetto tabella. In questo modo vengono selezionate le sole celle di tab1, mentre le celle di tab2 non vengono selezionate.
precedente
Sito realizzato in base al template offerto da
http://www.graphixmania.it
