PROGRAMMIAMO
JS - Accedere direttamente agli elementi
Accedere direttamente agli elementi

Nella precedente lezione abbiamo visto come il legacy DOM fornisse un certo numero di proprietà dell'oggetto document, le quali (sotto forma di array) permettevano di accedere ad alcuni (ma non a tutti) gli elementi della pagina.

Tutto questo è stato superato con l'uso moderno del DOM, il quale contiene metodi per l'accesso diretto a tutti i nodi del DOM, cioè a tutti gli elementi della pagina html.

document.getElementById

Conosciamo già da molto tempo questo metodo dell'oggetto document. Come abbiamo già detto document rappresenta la radice del DOM, cioè in pratica l'elemento html che racchiude l'intera pagina.

Col metodo getElementById possiamo accedere a qualsiasi elemento dotato di un identificatore id. Per esempio:

<!DOCTYPE html>

<html>

<head>
<meta charset="utf-8">


<title> Uso di getElementById </title>

<script>

function cambia()
    {
    document.getElementById('foto').src='foto2.jpg';
    }

</script>

</head>

<body>

<p>
<img alt="cambia immagine" id="foto" src="foto1.jpg" onclick="cambia()">
</p>

</body>

</html>

 

document.getElementsByTagName

Questo metodo fornisce un array contenente tutti gli elementi che corrispondono a un dato tag. Facciamo subito un esempio:

<!DOCTYPE html>

<html>

<head>
<meta charset="utf-8">


<title> Uso di getElementsByTagName </title>

<script>

function elenco()
    {
    lista = document.getElementsByTagName("li");

    for (i=0;i<lista.length;i++)
        alert(lista[i].innerHTML)

    }

</script>

</head>

<body>
<h1 onclick="elenco()">Tipi di dessert</h1>

<ol>
<li>Budino</li>
<li>Gelato</li>
<li>Torta</li>
</ol>

</body>

</html>

Viene visualizzata una lista non ordinata con un elenco di dessert. Cliccando sul titolo H1 i nomi dei dessert vengono visualizzati usando il metodo alert.

Si noti che lista si comporta esattamente come un array in JS. La sua proprietà length contiene il numero di elementi (in questo caso 3). Per accedere ai singoli elementi del vettore, bisogna usare un ciclo e le parentesi quadre.

Abbiamo inoltre usato la proprietà innerHTML per accedere al contenuto testuale dei diversi elementi <li>.

 

document.getElementsByClassName 

Questo metodo è simile al precedente, ma fornisce un vettore di tutti gli elementi che appartengono a una medesima classe:

<!DOCTYPE html>

<html>

<head>
<meta charset="utf-8">


<title> Uso di getElementsByClassName </title>

<script>

function elenco()
{
lista = document.getElementsByClassName("prova");

for (i=0;i<lista.length;i++)
alert(lista[i].innerHTML)


    }

</script>

</head>

<body>
<h1 onclick="elenco()">Clicca qui per vedere un elenco!</h1>
<h2 class="prova">Ciao a tutti!</h2>
<p class="prova">Benvenuti in questa pagina</p>
<p>Questo paragrafo non viene elencato</p>

</body>

</html>

 

document.querySelectorAll e document.querySelector

Si tratta di due metodi che consentono di selezionare gli elementi in base a un selettore CSS. La differenza fra i due è che document.querySelector torna solo il primo elemento corrispondente all'interno del documento, mentre document.querySelectorAll torna una lista con tutti gli elementi corrispondenti.

Si consideri l'esempio seguente:

<!DOCTYPE html>

<html>

<head>
<meta charset="utf-8">


<title> Uso di document.querySelector </title>

<script>

function elimina()
{
document.querySelector(".nounderscore a").style.textDecoration="none";
}

</script>



</head>

<body>
<h1 onclick="elimina()">Clicca qui per eliminare la sottolineatura del primo link</h1>
<p class="nounderscore">Clicca <a href="pag1.html">qui</a></p>
<p >Clicca <a href="pag2.html">qui</a></p>
</body>

</html>

Il selettore .nounderscore a seleziona gli elementi <a> contenuti in un elemento di classe "nounderscore". Perciò la funzione elimina() cancella la decorazione del primo link, ma non del secondo.

A differenza di document.getElementsByClassName, che può usare solo nomi di classi, document.querySelectorAll e document.querySelector possono usare selettori complessi, prodotti in base alle regole dei CSS (come si vede anche dal nostro semplice esempio: .nounderscore a è un selettore, ma non un nome di classe).

Un'altra importante differenza è che document.querySelectorAll e document.querySelector tornano un risultato che non è "vivo", nel senso che se la pagina viene modificata attraverso uno script (per esempio eliminando o aggiungendo degli elementi), il risultato di questi due metodi non cambia. Invece document.getElementsByClassName cambia attivamente ogni volta che la pagina viene modificata.

 

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it