Conforme mencionado na resposta anterior, esse comportamento é conhecido como acesso nomeado no objeto de janela . O valor do name
atributo para alguns elementos e o valor do id
atributo para todos os elementos são disponibilizados como propriedades do window
objeto global . Estes são conhecidos como elementos nomeados. Como window
é o objeto global no navegador, cada elemento nomeado estará acessível como uma variável global.
Isso foi originalmente adicionado pelo Internet Explorer e, eventualmente, foi implementado por todos os outros navegadores simplesmente para compatibilidade com sites que dependem desse comportamento. Curiosamente, o Gecko (mecanismo de renderização do Firefox) optou por implementá-lo apenas no modo quirks , enquanto outros mecanismos de renderização o deixaram no modo padrão.
No entanto, a partir do Firefox 14, o Firefox agora também oferece suporte ao acesso nomeado ao window
objeto no modo de padrões. Por que eles mudaram isso? Acontece que ainda existem muitos sites que dependem dessa funcionalidade no modo de padrões. A Microsoft até lançou uma demonstração de marketing , impedindo que ela funcionasse no Firefox.
O Webkit considerou recentemente o oposto , relegando o acesso nomeado nowindow
objeto apenas ao modo quirks. Eles decidiram contra o mesmo raciocínio que Gecko.
Tão ... louco que pareça que esse comportamento agora seja tecnicamente seguro para uso na versão mais recente de todos os principais navegadores no modo de padrões . Porém, embora o acesso nomeado possa parecer um tanto conveniente, ele não deve ser usado .
Por quê? Muito do raciocínio pode ser resumido neste artigo sobre por que as variáveis globais são ruins . Simplificando, ter um monte de variáveis globais extras leva a mais erros. Digamos que você acidentalmente digite o nome de a var
e digite umaid
de um nó DOM, SURPRISE!
Além disso, apesar de padronizados, ainda existem algumas discrepâncias nas implementações do navegador de acesso nomeado.
- IE incorretamente torna o valor do
name
atributo acessível para elementos de formulário (entrada, seleção, etc.).
- O Gecko e o Webkit incorretamente NÃO tornam as
<a>
tags acessíveis por meio de seusname
atributos.
- O Gecko manipula incorretamente vários elementos nomeados com o mesmo nome (retorna uma referência a um único nó em vez de uma matriz de referências).
E tenho certeza de que há mais se você tentar usar o acesso nomeado em casos extremos.
Conforme mencionado em outras respostas, use document.getElementById
para obter uma referência a um nó DOM por ele id
. Se você precisar obter uma referência a um nó por seu name
atributo use document.querySelectorAll
.
Por favor, não propague esse problema usando o acesso nomeado em seu site. Muitos desenvolvedores da Web perderam tempo tentando rastrear esse comportamento mágico . Nós realmente precisamos agir e fazer com que os mecanismos de renderização desativem o acesso nomeado no modo de padrões. No curto prazo, ele interromperá alguns sites que fazem coisas ruins, mas, a longo prazo, ajudará a avançar a web.
Se você estiver interessado, eu falo sobre isso com mais detalhes no meu blog - https://www.tjvantoll.com/2012/07/19/dom-element-references-as-global-variables/ .