Atributele tag-urilor ca proprietăți în JavaScript

Să învățăm acum să obținem atributele tag-urilor. Aici se aplică următoarea regulă: fiecărui atribut al tag-ului îi corespunde o proprietate cu același nume a elementului DOM.

Să ne uităm la un exemplu. Să presupunem că avem următorul tag:

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

Să obținem o referință la elementul nostru într-o variabilă:

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

Să afișăm valorile atributelor de care avem nevoie:

javascriptconsole.log(elem.id);   // va afișa 'elem'
console.log(elem.type); // va afișa 'text'

Și acum, de exemplu, să schimbăm valoarea atributului:

javascriptelem.type = 'submit';

Задание 1

Este dat următorul input:

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

De asemenea, este dat un buton. La click pe buton, afișați pe ecran conținutul atributului type al input-ului menționat mai sus.

Задание 2

Este dat următorul input:

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

De asemenea, este dat un buton. La click pe buton, scrieți în atributul type valoarea submit.

Задание 3

Să presupunem că aveți un link sub forma tag-ului a, un buton și un paragraf. La click pe buton, afișați în paragraf conținutul atributului href al link-ului.

Задание 4

Să presupunem că aveți un link și un buton. La click pe buton, adăugați la sfârșitul textului link-ului conținutul atributului său href între paranteze rotunde.

Задание 5

Să presupunem că aveți o imagine. Plasați-o pe pagină folosind tag-ul img. Să presupunem că sunt date și un buton și un paragraf. Faceți astfel încât la click pe buton, în paragraf să se scrie calea către imagine din atributul său src.

Задание 6

Este dată o imagine în tag-ul img și un buton. La click pe buton, în atributul width scrieți valoarea 300.

Задание 7

Este dată o imagine în tag-ul img și un buton. Să presupunem că în atributul width este setată o anumită lățime. Creați un buton, la click pe care lățimea imaginii va crește de 2 ori.

Задание 8

Să presupunem că aveți două imagini. Creați pe pagină un tag img și două butoane. La click pe primul buton, scrieți în atributul src calea către prima imagine, iar la click pe al doilea - calea către a doua imagine.