60

Recentemente em meus estudo notei um objeto que manipulava o DOM do elemento que tinha o mesmo nome em seu id.

teste.style.border = '1px solid #CCC';
teste.style.width = '500px';
teste.style.height = '50px';
<div id="teste">
</div>

Dúvida

  • Por que os ids vão para o global space?
  • Se eu posso acessar o elemento direto por seu id, por que usar getElementById?

Nota

Objetos de nome composto são acessíveis no window

window['teste-id_composto'].style.border = '1px solid #CCC';
window['teste-id_composto'].style.width = '500px';
window['teste-id_composto'].style.height = '50px';
<div id="teste-id_composto">
</div>

3 Respostas 3

69
+50

O facto de elementos nomeados* fazerem parte das propriedades de document e/ou window é uma infelicidade, fruto de aplicações bem simples que havia há muitos anos, no inicio do DOM e JavaScript.

Infelizmente por serem usadas e alguns browsers as promoverem elas ainda existem para não quebrar código antigo, e são até prática comum. Ter referências a elementos nas propriedades de document ou window é muito má ideia, uma vez que ocupam o mesmo espaço que variáveis do código das aplicações que sejam corridas e podem ser "apagadas". Sim, declarar uma função ou variável no espaço global sobrescreve alguma propriedade que venha de um elemento nomeado que use o mesmo nome.

Qual a solução segura para separar as àguas?

=> usar document.getElementById() e/ou document.querySelector()

O que diz a W3C?

A especificação de HTML 5.1 (12 abril de 2016) é bem clara aqui e recomenda não aceder a elementos nomeados, via document ou window. Na especificação diz assim:

As a general rule, relying on this will lead to brittle code. Which IDs end up mapping to this API can vary over time, as new features are added to the Web platform, for example. Instead of this, use document.getElementById() or document.querySelector().

Ou seja, "em regra geral depender deste método (window[id]) gera código frágil. Em vêz desta tecnologia deve usar-se document.getElementById() ou document.querySelector()".


Nota:

* - elementos nomeados (named elements é a designação que conheço em Inglês) são todos os elementos que têm o atributo id ou name definido.

1
  • 4
    Agora com essa nota da W3C digo que esta é a melhor resposta +1
    – Syzoth
    Commented 13/04/2016 às 15:00
30
+100

Antes de existirem padrões para o HTML, CSS e JavaScript quem definia isto eram os próprios browsers, ou seja cada browser tinha a sua maneira de fazer as coisas, exemplo disso era a maneira de obtêr os elementos do DOM:

  • Internet Explorer 4 usavamos document.all
  • Netscape4 usavamos document.layers

Estes eram os principais browsers do "mercado" e eram os que primeiro implementaram JavaScript (no InternetExplorer era chamado de JScript)

A partir da versão do InternetExplorer 5.01 passou a ser suportado o document.getElementById e document.getElementsByTagName, o único que não funcionava no InternetExplorer era o document.getElementsByTagName("*");, que só passou a ser suportado no InternetExplorer 6, pra isso tínhamos que usar document.all ainda.

Os IDs por serem elementos "únicos" no InternetExplorer (apesar de alguns desenvolvedores repetirem eles, o que é um equivoco) passavam a ser acessíveis diretamente nas referencias das variáveis globais que no JavaScript pra navegadores é o objeto window, isso desde que o DOM estivesse carregado e a variável não tivesse sido declarada.

O InternetExplorer manteve essa característica pra poder manter a compatibilidade com sites que tinham sido feito pra versões anteriores, alguns navegadores importaram tal característica pra tentar manter a compatibilidade

Na época era muito comum acusar o navegador por não funcionar em determinado site, quando o problema na verdade era no script, então muitos desenvolvedores de motores se viam obrigados a colocar essas peculiaridades nos próprios motores.

No Firefox por exemplo o document.layers ainda era suportado, mas emitia um warning no console avisando que ele seria removido, diferentemente o InternetExplorer manteve muitas coisas, como o document.all (esse as vezes gera uma lista de DOM diferente do document.getElementsByTagName("*");).

Existiu um motor chamado iCab (até a versão 3 do navegador do qual seu motor nome também se chamava iCab, na versão 4 em diante passou a usar Webkit e Cocoa API) para macOS que tinha funcionalidades semelhantes ao do IE4 como document.all, isso era uma maneira de manter a compatibilidade com sites feitos pra Internet Explorer.

É provável (não tem nada discutido, é apenas uma suposição) que com a evolução dos navegadores e "normas" do ECMAScript o window gerar uma variável que represente um elemento por id automaticamente seja removido um dia e só seja mantido o que é realmente necessário, ou seja se usar algo como window.meuElemento, isto poderá falhar no futuro.

Também não recomendo usar a referencia da ID devido aos conflitos com variáveis que podem ter sido definidas e que tenham o mesmo nome do id (isto é um problema que já pode ocorrer e não depende do futuro).

Note que existem outras propriedades pra obter elementos DOM como:

  • document.forms

    Obtém formulários pelo index como document.forms[0]

  • document.embeds

    Obtém elementos <embed> pelo index como document.embeds[0]

  • window.frames

    Obtém elementos <frame> e <iframe> pelo index como window.frames[0], note que window.frames não retorna o elemento DOM do (i)frame e sim o objeto window de dentro dele, isto window.frames[0] então seria o mesmo que fazer isto document.getElementsByTagName('iframe')[0].contentWindow

2
  • 1
    Pode se disser que é um complemento histórico para a resposta de @Sergio. Muito interessante. Commented 13/04/2016 às 13:53
  • 1
    @GuilhermeLautert Pode ser =)
    – Syzoth
    Commented 13/04/2016 às 13:55
4

A diferença é pequena, está mais no tempo de processamento. O "document" já é um elemento renderizado pelo Dom, neste sentido,quando você usa getElementById você está capturando a id do elemento renderizado propriamente dito, e não ocorrerá erro se o elemento não existir no seu documento. O que torna a propriedade mais segura de não dar um erro, enquanto, no window['id_nome'], é capturado pela estrutura da sua janela global, o que acontece neste caso, é que você captura do array da janela... Não há muita diferença em si, mas no caso do window['id_nome'], pode ocorrer erro, principalmente se você digitar o índice erroneamente, ou tentar localizar algo que não exista no window, também depende muito do comportamento da janela e do tipo de navegador, o IE é meio falho nesse quesito. Pois se não tiver um tratamento adequado, em algum momento, poderia não encontrar o índice do array, mas nada que não possa ser resolvido conforme o exemplo abaixo:

if (window['id_name']) {
    var el = window['id_name'];
} 

PS: Só tome cuidado com uso de palavras reservadas da janela.

8
  • Olá Ivan, poderia explicar exatamente aonde o IE é falho? Desculpe falar, mas sobre a parte que você afirma que window['id_nome'] pode causar erro se o elemento não existir e o getElementById não, me parece errado em ambos casos podem ocorrer falhas, window['id_nome'] se não existir o elemento vai retornar apenas undefined e document.getElementById('id_nome') retornará null. O erro pode ocorrer em ambos, já que retornariam undefined e null. É apenas uma critica construtiva visando que possivelmente você possa melhorar sua resposta. ;)
    – Syzoth
    Commented 5/05/2017 às 1:59
  • Uma forma de evitar este erro é usando: window.onload = function() { ... }, undefined é diferente de null, então, o erro, é exatamente essa a diferença, undefined é um elemento não definido, o que podemos considerar um erro de lógica, se algo esperado (um array da janela) estaria definido, não teria porque retornar undefined. (isso é tratado como um erro). Commented 23/07/2018 às 19:03
  • Caro Ivan, Isso de undefined e null que citei é outra coisa, eu disse que vai retornar, seja diferente null ou undefined, eu se como evitar isso (por exemplo pt.stackoverflow.com/a/137881/3635), a questão que não dá para entender é a parte que vc fala do IE ser falho, mas é algo que ficou dificil de entender aonde exatamente é isto, eu queria entender isto que vc citou ;)
    – Syzoth
    Commented 23/07/2018 às 19:09
  • É que no IE, o dom é processado com mais lentidão... por isso falha. Commented 5/11/2019 às 11:25
  • 1
    Isso é um equívoco, fez algum teste de benchmark? Sabe que é para isto que existem eventos como DOMContentLoaded ou a propriedade document.readyState, ser um motor de processamento ou renderização mais lento não significa falha alguma. Aliás, se um site não for em "buffer" e for lento, o DOM vai demorar de processar de qualquer forma, seja Chrome, FF, IE, Safari.
    – Syzoth
    Commented 6/11/2019 às 1:54

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 .