GetElementsByClassName in Javascript
Il metodo getElementsByClassName() recupera gli elementi nel DOM associati a una classe Css del foglio di stile.
getElementsByClassgName(x)
Dove x è la classe css che voglio selezionare.
Un esempio pratico
In questa pagina web sono presenti tre tag <p>
Il primo e il terzo tag <p> sono associati alla classe "prova".
<html>
<head>
</head>
<body>
<p class='prova'>Test 1</p>
<p>Test 2</p>
<p class='prova'>Test 3</p>
<script>
var Obj2 = document.getElementsByClassName("prova");
</script>
</body>
<html>
Il metodo getElementsByClassName('prova') seleziona tutti gli oggetti nel DOM associati alla classe 'prova' e li scrive nella variabile Obj2
Nella variabile Obj2 sono copiati gli oggetti selezionati e tutte le loro proprietà.
Ogni oggetto viene numerato con un indice progressivo a partire da zero.
Ad esempio, per visualizzare il testo contenuto nel primo oggetto selezionato digito
document.write(Obj2[0].innerHTML);
In questo caso l'indice tra parentesi quadre Obj2[0] è uguale a zero.
Il risultato in output è
Test 1
Per stampare il testo del secondo oggetto selezionato digito
document.write(Obj2[1].innerHTML);
In questo caso l'indice tra parentesi quadre Obj2[1] è uno.
Il risultato in output è
Test 3
Ovviamente posso utilizzare gli oggetti selezionati anche modificare il DOM oltre che leggere le loro proprietà.
Ad esempio, per sostituire il testo "Test3" con la stringa "Hello" nel secondo elemento selezionato scrivo
Obj2[1].innerHTML="Hello";
Quando l'utente visualizza la pagina web sul browser vede "Hello" invece di "Test 3".
Test 1
Test 2
Hello
E così via.
