Атрибуты тегов как свойства в 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 путь к первой картинке, а по нажатию на вторую - путь ко второй картинке.