Recuperare un elemento di una pagina HTML

Un elemento di una pagina HTML può essere recuperato in vari modi, tramite:

l’attributo ‘id’ (già trattato, vedi sotto)
il nome del tag
il nome della classe CSS
i selettori CSS
le collezioni degli oggetti HTML

Il primo modo lo abbiamo già trattato nell’articolo in cui si parla dell’oggetto document a cui si rimanda (link). Vediamo ora quali solo le altre possibilità che il DOM (vedi link) ci mette a disposizione e che possiamo sfruttare con Javascript.

Recuperare gli elementi tramite il nome del tag

Quando si ha l’esigenza di recuperare tutti gli elementi di una pagina che hanno uno specifico tag (ad esempio tutti i paragrafi, <p>, o tutti i <div>, ecc.) è possibile farlo utilizzando il seguente metodo.

var v = document.getElementsByTagName("nome_tag");

1	var v = document.getElementsByTagName("nome_tag");

Il metodo getElementsByTagName() di un elemento HTML permette di recuperare tutti gli elementi della pagina corrispondenti al tag che viene passato al metodo come parametro sotto forma di stringa. Il metodo restituisce il riferimento ad un array che contiene i riferimenti di tutti gli elementi recuperati. L’array può essere scandita con la tipica sintassi dei vettori ad indice: v[i]. Vediamo un primo semplice esempio.

Esempio 1)

<!DOCTYPE html>
<html>
<body>
	<h2>Il DOM HTML e Javascript</h2>
	<p>Il DOM è molto utile.</p>
	<p>Esempio di recupero di tutti gli elementi 'paragrafo' tramite il metodo <b>getElementsByTagName</b>.</p>
	<p id="vuoto"></p>
	<script>
		var v = document.getElementsByTagName("p");
		document.getElementById("vuoto").innerHTML = 'Il primo paragrafo ha indice 0 e recita così: \"' + v[0].innerHTML + '\"';
	</script>
</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h2>Il DOM HTML e Javascript</h2>

<p>Il DOM è molto utile.</p>

<p>Esempio di recupero di tutti gli elementi 'paragrafo' tramite il metodo <b>getElementsByTagName</b>.</p>

var v = document.getElementsByTagName("p");

document.getElementById("vuoto").innerHTML = 'Il primo paragrafo ha indice 0 e recita così: \"' + v[0].innerHTML + '\"';

</script>

</body>

</html>

Nell’esempio di sopra, al caricamento della pagina, al paragrafo con id=”vuoto” viene aggiunto del testo, producendo il seguente risultato:

In particolare la variabile v contiene un riferimento al vettore con i riferimenti di tutti i paragrafi della pagina, e fra questi v[0] dà accesso al primo paragrafo.

Il metodo getElementsByTagName() è un metodo che appartiene non solo all’oggetto document, ma a tutti gli elementi HTML. Vediamolo con un altro esempio.

Esempio 2)

<!DOCTYPE html>
<html>
<body>
	<div id= "uno">
		<h2>Div 1</h2>
		<p>Paragrafo uno del div 1</p>
		<p>Paragrafo due del div 1</p>
	</div>
	<div id= "due">
		<h2>Div 2</h2>
		<p>Paragrafo uno del div 2</p>
		<p>Paragrafo due del div 2</p>
	</div>
	<b><p id="risultato"></p></b>
	<script>
		var d = document.getElementById("due");
		var p = d.getElementsByTagName("p");
		document.getElementById("risultato").innerHTML = 'Risultato: \"' + p[0].innerHTML + '\"';
	</script>
</body>
</html>

<!DOCTYPE html>

<html>

<body>

<p>Paragrafo uno del div 1</p>

<p>Paragrafo due del div 1</p>

</div>

<p>Paragrafo uno del div 2</p>

<p>Paragrafo due del div 2</p>

</div>

var d = document.getElementById("due");

var p = d.getElementsByTagName("p");

document.getElementById("risultato").innerHTML = 'Risultato: \"' + p[0].innerHTML + '\"';

</script>

</body>

</html>

L’esempio di sopra, al caricamento della pagina produce il seguente risultato:

In particolare la variabile d è un riferimento al div con id=”due”, la variabile p è un riferimento al vettore con i riferimenti di tutti i paragrafi del div con id=”due” (si noti che il metodo è stato richiamato sul riferimento d) e, infine, p[0] dà accesso al primo paragrafo tra quelli recuperati.

Recuperare gli elementi tramite il nome della classe CSS

Il metodo getElementsByClassName() permette di recuperare tutti gli elementi di una pagina che appartengono ad una specifica classe CSS. Il metodo richiede come parametro la stringa del nome della classe da cercare e restituisce il riferimento ad un array che contiene i riferimenti di tutti gli elementi recuperati. L’array può essere scandita con la tipica sintassi dei vettori ad indice: v[i]. Sintassi:

var v = document.getElementsByClassName("nome_classe");

1	var v = document.getElementsByClassName("nome_classe");

Si fa notare che questo metodo appartiene non solo all’oggetto document, ma a tutti gli elementi HTML. L’utilizzo di questo metodo è molto simile a quello del paragrafo precedente.

Recuperare gli elementi tramite i selettori CSS

Il metodo querySelectorAll() permette di recuperare tutti gli elementi di una pagina che corrispondono ad uno specifico selettore CSS (id, class, type, valori di attributi, ecc.). Il metodo richiede come parametro la stringa del selettore CSS da cercare e restituisce il riferimento ad un array che contiene i riferimenti di tutti gli elementi recuperati. L’array può essere scandita con la tipica sintassi dei vettori ad indice: v[i]. Sintassi:

var v = document.querySelectorAll("div.rosso");

1	var v = document.querySelectorAll("div.rosso");

Nel caso dell’esempio di sopra, la variabile v contiene un riferimento ad un vettore che contiene i riferimenti a tutti gli elementi div della pagina con class = “rosso”.

Recuperare gli elementi tramite le collezioni degli oggetti HTML

Questa modalità di recupero è un caso più particolare che sfrutta metodi più specifici degli oggetti del DOM. Qui riporto solo un caso specifico relativo all’elemento form di una pagina HTML. (Per approfondimenti si rimanda alla documentazione ufficiale del W3C).

Esempio.

<!DOCTYPE html>
<html>
<body>
	<form id="dati" action="esegui.php">
	    <label><b>Cognome</b></label><br/>
	    <input type="text" name="cognome"><br/>
	    <label><b>Nome</b></label><br/>
	    <input type="text" name="nome"><br/>
	    <label><b>Indirizzo</b></label><br/>
	    <input type="text" name="indirizzo">
	    <input type="submit" name='invia' value="Invia">
	</form> 
	<p>Clicca il bottone "Visualizza" per visualizzare i valori inseriti, prima dell'invio dei dati.</p>
	<button onclick="visualizza()">Visualizza</button>
	<p id="console"></p>
	<script>
	function visualizza() {
	    var v = document.forms["dati"];
	    var text = "";
	    for (var i = 0; i < v.length -1; i++) {
	        text += v.elements[i].value + "<br>";
	    }
	    document.getElementById("console").innerHTML = text;
	}
	</script>
</body>
</html>

<!DOCTYPE html>

<html>

<body>

<label><b>Cognome</b></label><br/>

<label><b>Indirizzo</b></label><br/>

</form>

<p>Clicca il bottone "Visualizza" per visualizzare i valori inseriti, prima dell'invio dei dati.</p>

<button onclick="visualizza()">Visualizza</button>

function visualizza() {

var v = document.forms["dati"];

var text = "";

for (var i = 0; i < v.length -1; i++) {

text += v.elements[i].value + "<br>";

}

document.getElementById("console").innerHTML = text;

}

</script>

</body>

</html>

Il codice di sopra produce la seguente pagina:

Nell’esempio precedente la variabile v contiene il riferimento ad un vettore che contiene i riferimenti a tutti gli elementi che compongono il form, che viene utilizzato nel ciclo for per recuperare tutti i valori inseriti nel form tramite l’attributo value (ad eccezione della value del bottone di submit, infatti la dimensione del vettore viene decrementata di 1) .

P.S. Il riferimento v può essere utilizzato anche per accedere ad uno specifico elemento della collezione di elementi del form, utilizzando la seguente sintassi:

v[‘nameElemento’] oppure v[‘idElemento’]

oppure direttamente con la seguente sintassi:

document.forms[‘dati’].[‘nameElemento’] oppure document.forms[‘dati’].[‘idElemento’]

Articoli che ti potrebbero interessare