11

Em Javascript, pode-se fazer referência a qualquer elemento que possua um id (e em alguns casos um name) usando-se simplesmente um identificador com o mesmo nome - sem a necessidade de declará-lo:

<div id="teste">Teste</div>
console.log(teste); // <div id="teste">Teste</div>

Exceto, é claro, se já existir uma variável com o mesmo nome:

console.log(teste); // undefined
var teste = 10;
console.log(teste); // 10

Ou se o id em questão já for uma propriedade de Window (como uma função built-in, por exemplo):

<div id="alert">Teste</div>
console.log(alert); // function alert() { [native code] } 

Dadas essas inconsistências, pergunto: é ruim usar essa funcionalidade? Devemos somente usar document.getElementById em vez disso? Ou seria uma simples questão de usar somente nomes "sãos" para os ids dos nossos elementos (i.e. não usar nada que já esteja definido na linguagem JavaScript)?

Li algumas opiniões no SOen - em geral dizendo para não usar - bem como uma discussão no w3.org com argumentos contra e a favor, mas não estou seguro. Há alguma razão objetiva para se evitar essa funcionalidade?

P.S. Embora já houve pressão para que essa funcionalidade ficasse restrita ao "quirks mode", aparentemente ela foi padronizada pelo HTML5 - de modo que ainda que houvesse incompatibilidades no passado os browsers futuros devem dar suporte consistente a ela.

6
  • 5
    Não é uma resposta propriamente dita, mas acho que você já deu a resposta na pergunta. Usar ids diretamente é um castelo de cartas, a qualquer momento alguém pode declarar uma variável e quebrar toda a funcionalidade. Commented 26/06/2014 às 18:45
  • 3
    @AnthonyAccioly Concordo! Pensei agora: também é possível que no futuro os browsers acrescentem uma propriedade nova - com o mesmo nome de um id seu - e com isso quebre seu código.
    – mgibsonbr
    Commented 26/06/2014 às 18:48
  • É justamente para isso que existe o document.getElementById. Use-o sempre.
    – user11833
    Commented 26/06/2014 às 18:51
  • 1
    Olha cada vez mais a coisa piora em vez de melhorar, eu to lendo aqui e é brincadeira como nós desenvolvedores Web sofremos!
    – user6026
    Commented 26/06/2014 às 19:14
  • 1
    @HarryPotter Uma vez eu li não sei onde (no caso, falando sobre segurança) que "a web é como um carro com 1000 pedais de aceleração e nenhum freio; a única maneira de parar o carro é garantindo que nenhum dos 1000 pedais esteja pressionado..." Toda hora aparecem funcionalidades novas (que, admito, muitas vezes são bem legais) e com elas um monte de problemas. E apesar disso a tendência [das entidades responsáveis pela padronização] é "inchá-la" cada vez mais. É por essas e outras que eu navego com JavaScript desabilitado (whitelisted) por padrão...
    – mgibsonbr
    Commented 26/06/2014 às 19:28

3 Respostas 3

3

Você já deu a resposta: a manutenção de um código assim seria inviável.

Mas há outro ponto contra. Conforme o teste abaixo, é possível ver que o getElementById é executado cerca de 50% mais rápido no Firefox do que usar o nome do ID diretamente. No Chrome não existiu tanta diferença. Vale a pena testar no IE.

http://jsperf.com/console-element-using-getelementbyid-vs-nothing

Ou seja, além do fator "manutenção", é pior também no fator "performance".

2
  • 1
    De fato, a discrepância se repetiu em todos os browsers que eu testei (inclusive no IE - onde essa funcionalidade "nasceu" e "se espalhou" pros demais)
    – mgibsonbr
    Commented 26/06/2014 às 20:55
  • Humm boa! Valeu por testar nos outros browsers. Aqui só tenho os FF e Chrome.
    – rafaels88
    Commented 26/06/2014 às 20:57
2

Interface Window -> window[name]

  • Retorna um elemento indicado ou uma coleção de elementos.

Como regra geral, contando com isto conduzirá ao código quebradiço. Quais IDs manterão mapeamento para esta API podem variar ao longo do tempo, conforme os novos recursos são adicionados à plataforma Web.

A interface Window suporta named properties. Funcionando para: o valor id de qualquer elemento HTML no documento ativo. O retorno do mesmo é gerado pelo user-agent(essa parte é a que torna não recomendável).

Houve uma mudança para garantir a compatibilidade com o IE:

[Gecko] [Internet Explorer] [Opera] [Webkit] 
Change how document[name] works to be compatible with both IE (which typically are targetted with <object>) and other UAs (which typically are targetted with <embed>).

Link: http://html5.org/r/6115

Devido a essas variações entre navegadores e possíveis atualizações como exemplo dado, não recomenda-se a dependência do recurso.

Fonte: http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#named-access-on-the-window-object

1

Uma das desvantagens de usar variáveis globais dinamicamente criadas via IDs é que fica mais difícil usar uma ferramenta de análise estática como o JSHint para detectar erros de digitação em nomes de variáveis ou globais criadas acidentalmente. Em geral prefiro que minhas variáveis tenham escopo léxico (estático).

Quanto a acessar os elementos via window ao invés de pelo nome da variável (window['teste']) fica ambiguo se você está acessando uma variável global ou um id de um elemento. Prefiro usar getElementById que deixa claro o que você está fazendo.

E se sua preocupação é que getElementById é um nome muito comprido, isso é fácil de resolver:

 function byId(id){ return document.getElementById(id) }
5
  • Depois que o ECMAScript 5 introduziu o querySelector, nem uso mais o getElementById Commented 26/06/2014 às 22:09
  • Eu ainda prefiro fazer getElementById(id) ao invés de querySelector('#' + id). Já quando a string é fixa é mais uma questão de gosto.
    – hugomg
    Commented 26/06/2014 às 22:13
  • Não entendi, eu uso document.querySelector("#comments-link-22614") tal como usaria $("#comments-link-22614") Commented 26/06/2014 às 22:25
  • @RonnyAmarante: Esse é o caso com a ID constante que pra mim tanto faz.
    – hugomg
    Commented 27/06/2014 às 0:14
  • "Em geral prefiro que minhas variáveis tenham escopo léxico (estático)" - esse, na minha opinião, é o ponto crucial; todo argumento contrário ao uso indiscriminado de globais se aplica também a "tratar elementos do DOM como se fossem globais". As demais respostas acrescentam informações interessantes, mas estou escolhendo a sua como resposta aceita principalmente por chamar a atenção a esse ponto.
    – mgibsonbr
    Commented 2/07/2014 às 5:05

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 .