Տեգերի ատրիբուտները որպես հատկություններ JavaScript-ում

Եկեք հիմա սովորենք ստանալ տեգերի ատրիբուտները: Այստեղ գործում է հետևյալ կանոնը. յուրաքանչյուր տեգի ատրիբուտին համապատասխանում է համանուն DOM տարրի հատկություն:

Եկեք նայենք օրինակով: Ենթադրենք մենք ունենք հետևյալ տեգը:

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

Ստացենք մեր տարրի հղումը փոփոխականի մեջ.

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

Եկեք արտածենք մեզ անհրաժեշտ ատրիբուտների արժեքները.

javascriptconsole.log(elem.id);   // կարտածի 'elem'
console.log(elem.type); // կարտածի 'text'

Իսկ հիմա օրինակի համար փոխենք ատրիբուտի արժեքը.

javascriptelem.type = 'submit';
Задание 1

Տրված է հետևյալ ինփուտը.

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

Տրված է նաև կոճակ: Կոճակի վրա սեղմելուց դուրս բերեք էկրանին վերոնշյալ ինփուտի type ատրիբուտի պարունակությունը:

Задание 2

Տրված է հետևյալ ինփուտը.

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

Տրված է նաև կոճակ: Կոճակի վրա սեղմելուց գրեք type ատրիբուտում submit արժեքը:

Задание 3

Ենթադրենք դուք ունեք հղում a տեգի տեսքով, կոճակ և պարբերություն: Կոճակի վրա սեղմելուց դուրս բերեք պարբերությունում հղման href ատրիբուտի պարունակությունը:

Задание 4

Ենթադրենք դուք ունեք հղում և կոճակ: Կոճակի վրա սեղմելուց ավելացրեք հղման տեքստի վերջում նրա href ատրիբուտի պարունակությունը կլոր փակագծերում:

Задание 5

Ենթադրենք դուք ունեք նկար: Տեղադրեք այն էջում img տեգի միջոցով: Ենթադրենք տրված են նաև կոճակ և պարբերություն: Ապահովեք, որ կոճակի վրա սեղմելուց պարբերությունում գրվի նկարի src ատրիբուտից նկարի ճանապարհը:

Задание 6

Տրված է նկար img տեգում և կոճակ: Կոճակի վրա սեղմելուց width ատրիբուտում գրեք 300 արժեքը:

Задание 7

Տրված է նկար img տեգում և կոճակ: Ենթադրենք width ատրիբուտում նշված է ինչ-որ լայնություն: Ստեղծեք կոճակ, որի վրա սեղմելուց նկարի լայնությունը կմեծանա 2 անգամ:

Задание 8

Ենթադրենք դուք ունեք երկու նկար: Կատարեք էջում img տեգ և երկու կոճակ: Առաջին կոճակի վրա սեղմելուց գրեք ատրիբուտում src առաջին նկարի ճանապարհը, իսկ երկրորդի վրա սեղմելուց երկրորդ նկարի ճանապարհը: