Os elementos da árvore DOM com ids tornam-se variáveis ​​globais?

Question

Trabalhando em uma ideia para um wrapper HTMLElement simples, me deparei com o seguinte para o Internet Explorer e cromada:

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

<div id="example">some text</div>

em Internet Explorador 8 e Chrome você pode fazer:

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

ou

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

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

Answer 1

O que deveria acontecer é que “elementos nomeados” são adicionados como propriedades aparentes do document objeto.Esta é uma péssima ideia, pois permite que os nomes dos elementos entrem em conflito com as propriedades reais dos document.

O IE piorou a situação ao adicionar também elementos nomeados como propriedades do window objeto.Isso é duplamente ruim porque agora você deve evitar nomear seus elementos com o nome de qualquer membro do document ou o window objeto que você (ou qualquer outro código de biblioteca em seu projeto) possa querer usar.

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

Geralmente é considerado uma má prática omitir var, bem como contar com elementos nomeados visíveis em window ou como globais.Atenha-se document.getElementById, que é mais amplamente apoiado e menos ambíguo.Você pode escrever uma função wrapper trivial com um nome mais curto se não gostar da digitação.De qualquer forma, não faz sentido usar um cache de pesquisa de id para elemento, porque os navegadores normalmente otimizam o getElementById ligue para usar uma pesquisa rápida de qualquer maneira;tudo que você consegue são problemas quando os elementos mudam id ou são adicionados/removidos do documento.

O Opera copiou o IE, depois o WebKit se juntou a ele e agora a prática anteriormente não padronizada de colocar elementos nomeados em document propriedades, e a prática anteriormente exclusiva do IE de colocá-las em window são ser padronizado pelo HTML5, cuja abordagem é documentar e padronizar todas as práticas terríveis infligidas a nós pelos autores dos navegadores, tornando-os parte da web para sempre.Portanto, 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’:isto é, formas, imagens, âncoras e alguns outros, mas não outras instâncias não relacionadas de um name atributo, como nomes de controle em campos de entrada de formulário, nomes de parâmetros em <param> ou digite metadados <meta>.‘Identificando’ names são aqueles que devem ser evitados em favor de id.

Answer 2

Conforme mencionado na resposta anterior, esse comportamento é conhecido como acesso nomeado no objeto 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 global window objeto.Eles são conhecidos como elementos nomeados.Desde 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 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 em modo peculiaridades apenas, enquanto outros mecanismos de renderização o deixaram ativado no modo padrão.

No entanto, a partir do Firefox 14, Firefox agora suporta acesso nomeado no window objeto no modo padrão também.Por que eles mudaram isso?Acontece que ainda existem muitos sites que dependem dessa funcionalidade no modo padrão.Microsoft até lançou uma demonstração de marketing isso aconteceu, impedindo que a demonstração funcionasse no Firefox.

Webkit recentemente considerado o oposto, relegando o acesso nomeado no window oponha-se apenas ao modo quirks.Eles decidiram contra isso pelo mesmo raciocínio de Gecko.

Então... por mais louco que pareça esse comportamento é agora tecnicamente seguro para uso na versão mais recente de todos os principais navegadores no modo padrão.Mas embora o acesso nomeado possa parecer um tanto conveniente, não deve ser usado.

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

Além disso, apesar de ser padronizado, ainda existem algumas discrepâncias nas implementações de acesso nomeado nos navegadores.

• O IE torna incorretamente o valor do name atributo acessível para elementos do formulário (entrada, seleção, etc).
• Gecko e Webkit incorretamente NÃO fazem <a> tags acessíveis através de seus name atributo.
• Gecko manipula incorretamente vários elementos nomeados com o mesmo nome (ele 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 seu id.Se você precisar obter uma referência a um nó por seu name uso de atributo document.querySelectorAll.

Por favor, não propague este problema usando acesso nomeado em seu site.Muitos desenvolvedores web perderam tempo tentando rastrear isso mágico comportamento.Nós realmente precisamos agir e fazer com que os mecanismos de renderização desativem o acesso nomeado no modo padrão.No curto prazo, isso irá quebrar alguns sites que estão fazendo coisas ruins, mas no longo prazo, isso ajudará a impulsionar a web.

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

Answer 3

Você deveria seguir getElementById() Nesses casos, por exemplo:

document.getElementById('example').innerHTML

Ou seja, gosta de misturar elementos com name e ID Atributos no espaço para nome global, é melhor ser explícito sobre o que você está tentando obter.

Answer 4

Sim, eles fazem.

Testado no Chrome 55, Firefox 50, ou seja, 11, ou seja, Edge 14 e Safari 10
Com o seguinte exemplo:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div id="im_not_particularly_happy_with_that">
    Hello World!
  </div>
  <script>
    im_not_particularly_happy_with_that.innerText = 'Hello Internet!';
  </script>
  <!-- Looking at you W3 HTML5 spec group ಠ_ಠ -->
</body>
</html>

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

Answer 5

A pergunta deve parecer: "As tags HTML com IDs fornecidas se tornam elementos DOM acessíveis globalmente?"

A resposta é sim!

É assim que deveria funcionar, e é por isso que os IDs foram introduzidos pelo W3C para começar.:O ID de uma tag HTML em um ambiente de script analisado se torna seu identificador de elemento DOM correspondente.

No entanto, o Netscape Mozilla se recusou a estar em conformidade com (a eles intruso) W3C e continuou teimosamente usando o atributo de nome depreciado para criar estragos e, portanto, quebrar a funcionalidade de script e a conveniência de codificação trazida pela introdução do W3C de IDs exclusivos.

Após o Netscape Navigator 4.7 fiasco, todos os desenvolvedores foram e se infiltraram no W3C, enquanto seus associados estavam substituindo a Web com práticas erradas e exemplos de uso indevido. Forçar o uso e a reutilização do atributo de nome já depreciado [! Que não era para ser único] a par com os atributos de identificação, para que os scripts que utilizassem o ID lidam para acessar elementos DOM específicos simplesmente quebrarem!

E quebrar eles fizeram o que também escreveriam e publicariam extensas lições e exemplos de codificação [seu navegador não reconheceria de qualquer maneira] como document.all.ElementID.property ao invés de ElementID.property Para pelo menos torná-lo ineficiente e dar ao navegador mais despesas gerais, caso não simplesmente não o quebre no domínio HTML usando o mesmo token para o nome (agora [1996-97], depreciado) e o atributo de identificação padrão que o forneça com o o mesmo valor de token.

Eles conseguiram facilmente convencer o exército esmagador de amadores ignorantes de que os nomes e IDs são praticamente os mesmos, exceto que o atributo de identificação é mais curto e, portanto, economiza bytes e mais conveniente para o codificador do que a propriedade de nome antigo. O que era claro que era mentira. Ou - em seus artigos publicados de HTML substituindo, convencendo os artigos de que você precisará fornecer o nome e o ID às suas tags para que sejam acessíveis pelo mecanismo de script.

Os assassinos de mosaico [codinome "mozilla"] estavam tão chateados que pensavam "se descermos, então a internet".

A Microsoft em ascensão - por outro lado - era tão ingênua que pensou que deveriam manter os depreciados e marcados para a exclusão de propriedades e tratá -la como se fosse um ID que fosse um identificador único para que eles não quebrassem a funcionalidade de script da Páginas antigas codificadas por estagiários Netscape. Eles estavam mortais errados ...

E o retorno de uma coleção de matrizes de elementos conflitantes de ID também não foi uma solução para esse problema deliberado causado pelo homem. Na verdade, derrotou todo o propósito.

E esse é o único motivo pelo qual o W3C ficou feio e nos deu idiotices como document.getElementById E a sintaxe irritante do rococo que acompanha o tipo ... (...)