Os elementos da tree DOM com ids se tornam variables ​​globais?

Trabalhando em uma ideia para um invólucro HTMLElement simples eu me deparei com o seguinte para o Internet Explorer e Chrome :

Para um determinado HTMLElement com ID na tree DOM, é possível recuperar o div usando seu ID como o nome da variável. Então, para um div como

some text

no Internet Explorer 8 e no Chrome, você pode fazer:

 alert(example.innerHTML); //=> 'some text' 

ou

 alert(window['example'].innerHTML); //=> 'some text' 

Então, isso significa que cada elemento na tree DOM é convertido em uma variável no namespace global? E isso também significa que se pode usar isso como um substituto para o método getElementById nesses navegadores?

O que é suposto acontecer é que ‘elementos nomeados’ são adicionados como propriedades aparentes do object de document . Essa é uma idéia muito ruim, pois permite que os nomes dos elementos entrem em conflito com as propriedades reais do document .

O IE piorou a situação, adicionando também elementos nomeados como propriedades do object da window . Isso é duplamente ruim, pois agora você deve evitar nomear seus elementos após qualquer membro do document ou do object de window você (ou qualquer outro código de biblioteca em seu projeto) queira usar.

Isso também significa que esses elementos são visíveis como variables ​​globais. Felizmente, neste caso, quaisquer declarações globais reais de var ou de function em seu código as sombream, portanto, você não precisa se preocupar tanto com a nomeação aqui, mas se tentar fazer uma atribuição a uma variável global com um nome conflitante e se esquecer para declarar var , você receberá um erro no IE enquanto tenta atribuir o valor ao próprio elemento.

Geralmente, é considerado uma prática ruim omitir var , assim como confiar em elementos nomeados visíveis na window ou como globais. Atenha-se a document.getElementById , que é mais amplamente suportado e menos ambíguo. Você pode escrever uma function de invólucro trivial com um nome mais curto se não gostar da digitação. De qualquer maneira, não faz sentido usar um cache de pesquisa de ID para elemento, porque os navegadores normalmente otimizam a chamada getElementById para usar uma pesquisa rápida de qualquer maneira; Tudo o que você consegue são problemas quando os elementos mudam de id ou são adicionados / removidos do documento.

O Opera copiou o IE, depois o WebKit, e agora a prática anteriormente não padronizada de colocar elementos nomeados nas propriedades do document , e a prática anterior de colocar o IE na window estão sendo padronizadas pelo HTML5, cuja abordagem é documentar e documentar. padronizar todas as práticas terríveis que nos são impostas pelos autores dos navegadores, tornando-os parte da web para sempre. Então o Firefox 4 também suportará isso.

O que são “elementos nomeados”? Qualquer coisa com um id e qualquer coisa com um name sendo usado para fins de ‘identificação’: ou seja, formulários, imagens, âncoras e alguns outros, mas não outras instâncias não relacionadas de um atributo de name , como nomes de controle em campos de input de formulário nomes de parâmetros em ou tipo de metadados em . ‘Identificando’ name s são os que devem ser evitados em favor do id .

Como mencionado na resposta anterior, esse comportamento é conhecido como access nomeado no object da janela . O valor do atributo name para alguns elementos e o valor do atributo id para todos os elementos são disponibilizados como propriedades do object global da window . Estes são conhecidos como elementos nomeados. Como window é o object global no navegador, cada elemento nomeado será 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) escolheu implementar isso 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 suporta o access nomeado no object da window no modo padrão. Por que eles mudaram isso? Acontece que ainda há muitos sites que dependem dessa funcionalidade no modo padrão. A Microsoft até lançou uma demo de marketing que impedia que a demonstração funcionasse no Firefox.

O Webkit considerou recentemente o oposto , relegando o access nomeado no object da window para o modo quirks apenas. Eles decidiram contra isso pelo mesmo raciocínio que o Gecko.

Então … louco como parece, esse comportamento agora é tecnicamente seguro para usar na versão mais recente de todos os principais navegadores no modo padrão . Mas enquanto o access nomeado pode parecer um pouco conveniente, ele não deve ser usado .

Por quê? Muito do raciocínio pode ser resumido neste artigo sobre por que as variables ​​globais são ruins . Simplificando, ter um monte de variables ​​globais extras leva a mais bugs. Digamos que você acidentalmente digite o nome de um var e por acaso digite um id de um nó DOM, SURPRESA!

Além disso, apesar de ser padronizado, ainda existem algumas discrepâncias nas implementações do navegador de access nomeado.

  • IE incorretamente torna o valor do atributo name acessível para elementos de formulário (input, select, etc).
  • O Gecko e o Webkit incorretamente NÃO tornam as tags acessíveis através do atributo name .
  • 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 access nomeado nos casos de borda.

Como mencionado em outras respostas, use document.getElementById para obter uma referência a um nó DOM por seu id . Se você precisar obter uma referência a um nó pelo atributo name use document.querySelectorAll .

Por favor, não propague este problema usando o access nomeado em seu site. Muitos desenvolvedores 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 access nomeado no modo padrão. No curto prazo, isso quebrará alguns sites fazendo coisas ruins, mas a longo prazo ajudará a levar a web adiante.

Se você estiver interessado, falarei sobre isso com mais detalhes no meu blog – https://www.tjvantoll.com/2012/07/19/dom-element-references-as-global-variables/ .

Você deve ficar com getElementById() nesses casos, por exemplo:

 document.getElementById('example').innerHTML 

O IE gosta de misturar elementos com atributos de name e ID no namespace global, então é melhor ser explícito sobre o que você está tentando obter.

Sim, eles fazem.

Testado no Chrome 55, Firefox 50, IE 11, IE Edge 14 e Safari 10
com o seguinte exemplo:

      
Hello World!

http://jsbin.com/mahobinopa/edit?html,out