Атрибуты тегов как свойства в JavaScript

Давайте теперь научимся получать атрибуты тегов. Здесь действует следующее правило: каждому атрибуту тега соответствует одноименное свойство DOM элемента.

Давайте посмотрим на примере. Пусть у нас есть вот такой тег:

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

Получим ссылку на наш элемент в переменную:

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

Выведем значения нужных нам атрибутов:

console.log(elem.id);   // выведет 'elem'
console.log(elem.type); // выведет 'text'

А теперь для примера поменяем значение атрибута:

elem.type = 'submit';

Дан следующий инпут:

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

Дана также кнопка. По нажатию на кнопку выведите на экран содержимое атрибута type указанного выше инпута.

Дан следующий инпут:

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

Дана также кнопка. По нажатию на кнопку запишите в атрибут type значение submit.

Пусть у вас есть ссылка в виде тега a, кнопка и абзац. По нажатию на кнопку выведите в абзац содержимое атрибута href ссылки.

Пусть у вас есть ссылка и кнопка. По нажатию на кнопку добавьте в конец текста ссылки содержимое ее атрибута href в круглых скобках.

Пусть у вас есть картинка. Разместите ее на странице с помощью тега img. Пусть даны также кнопка и абзац. Сделайте так, чтобы по клику на кнопку в абзац записался путь к картинки из ее атрибута src.

Дана картинка в теге img и кнопка. По нажатию на кнопку в атрибут width запишите значение 300.

Дана картинка в теге img и кнопка. Пусть в атрибуте width задана некоторая ширина. Сделайте кнопку, по нажатию на которую ширина картинки будет увеличиваться в 2 раза.

Пусть у вас есть две картинки. Сделайте на странице тег img и две кнопки. По нажатию на первую кнопку запишите в атрибут src путь к первой картинке, а по нажатию на вторую - путь ко второй картинке.