Qual é a diferença entre um "atributo" e uma "propriedade"?

Atributos são definidos na marcação HTML, mas as propriedades são definidas no DOM. Para ilustrar a diferença, imagine que temos esse campo de texto em nosso HTML: <input type="text" value="Hello">.

const input = document.querySelector('input');
console.log(input.getAttribute('value')); // Olá
console.log(input.value); // Olá

Mas depois de alterar o valor do campo de texto adicionando "Mundo!" a ele, isso se torna:

console.log(input.getAttribute('value')); // Olá
console.log(input.value); // Olá Mundo!

Exercícios

const input = document.querySelector('#name');
input.value = 'edited';
console.log(input.value, input.getAttribute('value'));