В чем разница между “атрибутом” (attribute) и “свойством” (property)?

Атрибуты определены в разметке HTML, а свойства определены в DOM. Чтобы проиллюстрировать разницу, представьте, что у нас есть это текстовое поле в HTML: <input type=”text” value=”Hello”>.

const input = document.querySelector(‘input’);
console.log(input.getAttribute(‘value’)); // Hello
console.log(input.value); // Hello

Но после того, как вы измените значение текстового поля, добавив к нему “World!”, будет:
console.log(input.getAttribute(‘value’)); // Hello
console.log(input.value); // Hello World!