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()
ordocument.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
ouname
defenidodefinido.