16 Ago 2016

Get element by tag name

Illustriamo in questo articolo come catturare un elemento html per nome del tag. Ecco una pagina di esempio


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p>Primo paragrafo</p>

<p>Secondo paragrafo</p>

<p>Terzo paragrafo</p>

<p>Quarto paragrafo</p>

<button type="button" onclick="cambiatesto();">Cambia testo</button>

<script>

function cambiatesto(){

    var x=document.getElementsByTagName('p');

    x[0].innerHTML='primo'.bold();

    x[1].innerHTML='secondo'.bold();
    x[2].innerHTML='terzo'.bold();
    x[3].innerHTML='quarto'.bold();
}

</script>
</body>
</html>

Abbiamo dichiarato quattro paragrafi. Ognuno di essi ha un nodo testo, cioè il proprio testo di paragrafo. Abbiamo creato una funzione cambiaTesto che catturavtutti gli elementi html tramite il tipo di tag e nel nostro caso <p>. Per
catturarli abbiamo dichiarato una variabile x che usa il metodo getElementsByTagName che ha una parametro di tipo stringa che accetta fra apici il nome del tag. Possiamo dire che questa variabile x diventa un array che racchiude tutti i paragrafi catturati che nel nostro caso sono 4. Ogni array come abbiamo già visto contiene degli elementi racchiusi fra parentesi quadre e con una propria posizione che parte da zero ed arriva alla posizione n-1. Nel nostro caso da zero a tre. Come notate abbiamo cambiato di ognuno di essi il testo del paragrafo con la funzione innerHTML. Abbiamo poi aggiunto la funzione bold() che trasforma il testo in grassetto. Infine abbiamo creato un pulsante che attiva questa funzione al click grazie all'evento onclick. Se cliccate sul pulsante vi compariranno i paragrafi con i testi in grassetto.

Scritto da 
Pubblicato in Javascript
Etichettato sotto
Letto 188 volte
Vota questo articolo
(0 Voti)

NOTA! Questo sito utilizza i cookie e tecnologie simili.

Se non si modificano le impostazioni del browser, l'utente accetta. Per saperne di piu'

Approvo