A diferença entre Propriedade e Atributo no HTML
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
atributos
HTML possuem umapropriedade
correspondente de mesmo nome em umnode
do DOM como por exemplo oid
. - Alguns
atributos
HTML não possuem umapropriedade
correspondente de mesmo nome em seunode
do DOM, como por exemplo o atributofor
onde suapropriedade
correspondente éhtmlFor
. - Algumas propriedades de um
node
não possuem um atributo correspondente como por exemplo apropriedade
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:
O node
do DOM correspondente terá as propriedades id
e type
de mesmo nome (dentre outras), ao acessarmos o valor dessas propriedades, recebendo o valor que foi definido inicialmente em seu atributo.
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.
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
:
Para que possamos acessar o valor do atributo for
via propriedade temos que utilizar a propriedade htmlFor
.
Apesar de possuirem nomes diferentes atualizando o valor da propriedade htmlFor
o mesmo será refletido no atributo for
.
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 disabled
habilita 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 false
para 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 value
de um elemento input
é utilizado apenas para inicializar a propriedade value
do seu respectivo node, como mostrado abaixo.
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.
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.