Работа с атрибутами через свойства и через
метод getAttribute - это не одно и
то же: при изменении свойства значение атрибута,
полученное через метод, не меняется. Давайте
посмотрим на примере атрибута value инпута:
<input id="elem" value="old">
Поменяем свойство value, а затем попробуем
прочитать значение атрибута через метод getAttribute:
let elem = document.querySelector('#elem');
elem.value = 'new'; // поменяли свойство
let value = elem.getAttribute('value');
console.log(value); // выведет 'old' - свойство не поменялось
То же самое будет, если пользователь изменит
содержимое инпута. В этом случае в свойстве
будет новое значение, а в атрибуте - исходное.
Получается, что атрибут, полученный через
getAttribute, хранит исходное значение
даже после того, как пользователь заполнил
поле и свойство изменилось.
Эту особенность можно использовать. Например, можно взять изначальное значение из атрибута и сравнить со свойством, чтобы узнать, изменилось ли значение. А при необходимости и перезаписать свойство атрибутом, отменив изменения.
Дан инпут с каким-то начальным значением. Дана также кнопка. По нажатию на кнопку определите, было ли изменено пользователем начальное значение инпута.
Изменение атрибута
А вот изменение атрибута обновляет свойство:
elem.setAttribute('value', 'new'); // поменяли атрибут
let value = elem.value;
console.log(value); // выведет 'new'
Дан инпут с каким-то начальным значением. Пусть пользователь меняет это значение. Сделайте рядом с инпутом кнопку, по нажатию на которую value инпута вернется в изначальное значение.