Atributos são definidos no HTML. Propriedades são acessadas a partir de nodes do DOM (Document Object Model).

Quando estamos escrevendo nosso código HTML, podemos definir atributos para os nossos elementos. Então, uma vez que o navegador fizer o parse do código, um node correspondente a cada elemento será criado no DOM. Este node é um objeto que, por sua vez, possui propriedades.

• Alguns atributosHTML possuem uma propriedade correspondente de mesmo nome em umnode do DOM como por exemplo o id.

• Alguns atributos HTML não possuem uma propriedade correspondente de mesmo nome em seu node do DOM, como por exemplo o atributo for onde sua propriedade correspondente é htmlFor.

• Algumas propriedades de um node não possuem um atributo correspondente como por exemplo a propriedade textContent.

  Um atributo HTML e uma propriedade de um Node não são a mesma coisa, mesmo se eles tiverem o mesmo nome.

Atributos que são mapeados para uma Propriedade de mesmo nome

tendo como exemplo o seguinte elemento abaixo:

elemento HTML com 2 atributos

O node do DOM correspondente terá as propriedades ide type de mesmo nome (dentre outras), ao acessarmos o valor dessas propriedades, recebendo o valor que foi definido inicialmente em seu atributo.

Acessando os valores das propriedades id e type que são mapeadas para atributos de mesmo nome

Pelo fato dessas 2 propriedades refletirem diretamente ao seu atributo de mesmo nome, se alterarmos a propriedade o atributo também será atualizado no html.

Valores dos atributos alterados via propriedade

Atributos que são mapeados para uma Propriedade de nome diferente

Agora vamos pegar um caso onde temos um atributo onde sua propriedade correspondente não possui o mesmo nome. como no caso abaixo do atributo for:

form básico

Para que possamos acessar o valor do atributo for via propriedade temos que utilizar a propriedade htmlFor.

Acessando o valor de uma propriedade que é mapeada para um atributo com nome diferente

Apesar de possuirem nomes diferentes atualizando o valor da propriedade htmlForo mesmo será refletido no atributo for.

Alteração da propriedade sendo refletida no atributo de nome diferente

Casos Diferenciados

Alguns atributos tem um comportamento um pouco diferente em relação a propriedade ao qual ele reflete, como os que mostrarei abaixo:

disabled

Por padrão a propriedade disable de um HTMLButtonElement é false fazendo com que o botão esteja ativo. quando o atributo disabled é adicionado a um elemento, apenas a sua presença sozinho inicializa a propriedade disabled do node do DOM como true fazendo com que o botão fique desabilitado.

Adicionar e remover o atributo disabledhabilita e desabilita o botão, perceba que o valor passado para o atributo disabledé irrelevante, motivo pelo qual não é possível habilitar um botão atribuindo falsepara o atributo disabled

Perceba que este comportamento só é assim para o attributo, pois com a propriedade disabled o valor ser true ou false tem diferença.

value

Aqui temos um outro exemplo que funciona de uma forma um pouco diferente, o attributo valuede um elemento input é utilizado apenas para inicializar a propriedade valuedo seu respectivo node, como mostrado abaixo.

Atributo value inicializando a propriedade value

Porem quando o usuário começar a digitar no input a propriedade value será atualizada com o ultimo valor que o usuário digitou, mas o atributo value não será alterado.

atributo value não é alterado com o novo valor, apenas a propriedade

O principal objetivo dos atributos é inicializar as propriedades de um node do DOM.

Conclusão

Entender a diferença entre estes dois conceitos é bastante importante principalmente para desenvolvedores que utilizam o Angular, pois o nosso tão querido data-binding é feito em cima das propriedades e não dos atributos.

E aí você sabia que existia essa diferença entre atributos e propriedades? Espero que este artigo tenha sido útil para você e até a próxima.