TL;DR
Os elementos HTML têm atributos. Quando representamos esses em JavaScript obtemos objetos com propriedades.
.setAttribute
muda no HTML, é mais lento e cego
.prop
muda diretamente no objeto do DOM, mais rápido
Partindo deste HTML:
<input type="text" value="Escreve o teu nome" />
Se eu escrever o meu nome nesse input, e fôr buscar o seu valor atual via JavaScript, repara no que obtenho:
input.value = 'Sérgio';
input.value; // dá "Sérgio"
input.getAttribute('value'); // dá "Escreve o teu nome"
Ou seja o .getAttribute
vai buscar a informação ao HTML que é estático, e não ao objeto do DOM que já mudou de valor.
Usar o setAttribute vai mudar o atributo do HTML e tem nalguns casos efeitos diferentes. Por exemplo input.setAttribute("disabled", false);
vai fazer o contrário do esperado, vai bloquear o elemento enquanto que input.disabled = false;
vai fazer o que é esperado.. Isto porque o browser detecta a presença do atributo disabled
e não lê o valor desse atributo (só a sua presença). Mudando a propriedade .disabled
muda diretamente o comportamento no elemento.
Um outro exemplo clarifica a diferença entre HTML e a representação no JavaScript do que se passa no DOM:
var input = document.querySelector('input');
input.setAttribute('dataA', 'foo');
console.log(1, input.dataA, input.parentNode.innerHTML);
// dá: 1 undefined "<input type="text" value="Escreve o teu nome" dataa="foo">"
input.dataB = 'foo';
console.log(2, input.dataB, input.parentNode.innerHTML);
// dá 2 "foo" "<input type="text" value="Escreve o teu nome" dataa="foo">
No primeiro caso o elemento HTML recebe um novo atributo dataa
e não dataA
pois o setAttribute
é case-insensitive e o valor "setado" não é retornado por input.dataA
, nem input.dataa
.
No segundo caso o .dataB
é adicionado como nova propriedade do objeto no JavaScript mas não é reproduzido no HTML. Fica somente do lado do JavaScript e não é escrito no HTML.
É boa prática alterar a propriedade diretamente e não misturar os dois no código pois pode gerar bugs bem dificeis de detetar.
À parte dos erros que podem ser gerados por setAttribute
aceder à propriedade do objeto que representa o elemento do DOM é também mais rápido.