Attributi dei tag come proprietà in JavaScript

Ora impariamo a ottenere gli attributi dei tag. Vale la seguente regola: a ogni attributo del tag corrisponde una proprietà omonima nell'elemento DOM.

Vediamo un esempio. Supponiamo di avere un tag come questo:

html<input id="elem" type="text">

Otteniamo un riferimento al nostro elemento in una variabile:

javascriptlet elem = document.querySelector('#elem');

Stampiamo i valori degli attributi che ci servono:

javascriptconsole.log(elem.id);   // stamperà 'elem'
console.log(elem.type); // stamperà 'text'

E ora, per esempio, cambiamo il valore di un attributo:

javascriptelem.type = 'submit';

Задание 1

È dato il seguente input:

html<input id="elem" type="email">

È dato anche un pulsante. Alla pressione del pulsante, visualizza a schermo il contenuto dell'attributo type dell'input sopra indicato.

Задание 2

È dato il seguente input:

html<input id="elem" type="email">

È dato anche un pulsante. Alla pressione del pulsante, scrivi nell'attributo type il valore submit.

Задание 3

Supponiamo di avere un link sotto forma di tag a, un pulsante e un paragrafo. Alla pressione del pulsante, visualizza nel paragrafo il contenuto dell'attributo href del link.

Задание 4

Supponiamo di avere un link e un pulsante. Alla pressione del pulsante, aggiungi alla fine del testo del link il contenuto del suo attributo href tra parentesi tonde.

Задание 5

Supponiamo di avere un'immagine. Inseriscila nella pagina usando il tag img. Siano dati anche un pulsante e un paragrafo. Fai in modo che al click sul pulsante nel paragrafo venga scritto il percorso dell'immagine dal suo attributo src.

Задание 6

È data un'immagine nel tag img e un pulsante. Alla pressione del pulsante, nell'attributo width scrivi il valore 300.

Задание 7

È data un'immagine nel tag img e un pulsante. Supponiamo che nell'attributo width sia impostata una certa larghezza. Crea un pulsante, alla cui pressione la larghezza dell'immagine aumenterà di 2 volte.

Задание 8

Supponiamo di avere due immagini. Crea nella pagina un tag img e due pulsanti. Alla pressione del primo pulsante, scrivi nell'attributo src il percorso della prima immagine, mentre alla pressione del secondo - il percorso della seconda immagine.