Атрибути на таговете като свойства в 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 пътя към първото изображение, а при натискане на втория - пътя към второто изображение.