Тег атрибуттары 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 атрибутына бірінші суретке жол жазыңыз, ал екінші түймені басқанда - екінші суретке жол жазыңыз.