PROGRAMMIAMO
JS - Modificare gli elementi
Accedere agli attributi

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:

<!DOCTYPE html>

<html>

<head>
<meta charset="windows-1252">


<title> Modifica degli attributi di un elemento </title>

<script>

function scambia()
    {
    var immagini = document.getElementsByTagName("img");
    var tmp;
    tmp = immagini[0].src;
    immagini[0].src = immagini[1].src;
    immagini[1].src = tmp;
    }

</script>

</head>


<body>
<p>Passa col mouse sulle immagini per scambiarle: </p>
<p><img src="prev.gif" onmouseover="scambia()"></p>
<p><img src="next.gif" onmouseover="scambia()"></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 delle due immagini (attraverso la variabile temporanea tmp).

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.

Accedere agli stili

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:

<!DOCTYPE html>

<html>

<head>
<meta charset="windows-1252">


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

Accedere alle classi

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:

 for (i=0;i < document.getElementsByTagName("td").length; i=i+1)
        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"

 

Accedere al contenuto di un elemento contenitore

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:

<!DOCTYPE html>

<html>

<head>
<meta charset="windows-1252">


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

 

Accedere al nome di un nodo

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):

 var paragrafo = document.getElementById("para");
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.

 

Usare in maniera combinata i diversi metodi

E' interessante notare che è possibile usare i diversi metodi per selezionare gli elementi in modo combinato. Si consideri l'esempio seguente:

<!DOCTYPE html>

<html>

<head>
<meta charset="windows-1252">


<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:

 var tabella = document.getElementById("tab1");

Quindi vengono selezionate tutte le celle (elementi <td>) della tabella tab1:

 var celle = tabella.getElementsByTagName("td");

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 - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it