Работа с атрибутами тегов через свойства элементов

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

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

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

Пусть ссылка на этот тег хранится в переменной elem. Тогда свойство elem.id будет хранить текст атрибута id, а свойство elem.type - текст атрибута type.

Давайте сделаем еще и кнопку, по нажатию на которую будут выводиться атрибуты нашего инпута:

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

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

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

А теперь по нажатию на кнопку выведем содержимое соответствующих атрибутов:

button.addEventListener('click', function() {
	alert(elem.id);   // выведет 'elem'
	alert(elem.type); // выведет 'text'
});

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

button.addEventListener('click', function() {
	elem.type = 'submit'; // присвоим новое значение атрибуту type
});

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

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