7

Em JavaScript podemos adicionar os atributos a determinado elemento com pelo menos duas maneiras:

var div = document.createElement('div');
div.id = 'meuId';

ou

var div = document.createElement('div');
div.setAttribute('id', 'meuId');

Existe alguma diferença em termos de desempenho e/ou compatibilidades entre navegadores, ou qualquer uma das formas serve perfeitamente?

1

2 Respostas 2

6

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.

1
  • 1
    gostei dos exemplos input.getAttribute('value') e input.setAttribute("disabled", false), realmente é bem bizarro, Commented 2/04/2015 às 15:12
2

O .setAttribute() possui problemas com compatibilidade com o IE até a versão 8.

Quanto a desempenho, segundo o teste no JSPerf, o acesso direto a propriedade é mais rapido.

Opera 28.0.1750.40

obj.title = 'This is a test';                 //1,096,233 ops/sec
obj.setAttribute('title', 'This is a test');  //  678,908 ops/sec
obj.custom = 'This is a test';                //  270,003 ops/sec
obj.setAttribute('custom', 'This is a test'); //  146,522 ops/sec
obj.dataset['custom'] = 'This is a test';     //   85,083 ops/sec

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .