Атрибути елементів

До деяких атрибутів можна звертатися напряму, вони вже є присутніми в об'єкті:

e.id
e.name
e.href
e.className
e.checked
e.disabled
...

Та кращий і універсальний спосіб роботи з атрибутами - це декілька методів:


				p.hasAttribute('title');

				p.getAttribute('id');

				p.setAttribute('title', 'Hello');

				p.removeAttribute('class');

Використання властивостей об'єкта напряму загрожує неочевидними помилками. Протестуйте у jsFiddle:


				<a href="/">test</a>


				let a = document.links[0];

				console.log(a.href);

				console.log(a.title);

				console.log(a.getAttribute('href'));

				console.log(a.getAttribute('title'));

Для роботи з атрибутами data-* є спеціальна властивість .dataset:


				p.dataset.id = '32';

				p.dataset.big = 'true';

				img.dataset.src = 'image.jpg';


				<p data-id="32" data-big="true">

				<img src="..." alt="..." data-src="image.jpg">

Якщо data-атрибут має декілька слів, то до нього треба звертатися як до властивості в форматі camelCase:


				<input type="text" data-max-length="32" data-valid-type="firstUpper">


				let input = document.querySelector('input');

				let max = parseInt(input.dataset.maxLength);

				input.dataset.validType = 'email';

Завдання

Виконуйте у jsFiddle, CodePen.

Створіть html-код з заголовком, посиланням, зображенням <img src="..." width="32">.
Виведіть повідомлення (alert) якщо у зображення не буде атрибута alt.
Змініть зображення у картинки, задавши нове значення атрибута src.
Якщо посилання має протокол http - задайте йому червоний колір тексту, якщо https - зелений.
Приберіть атрибут width у зображення.
Перед зміною зображення картинки зберігайте старий url у атрибут data-src.