Vi no twitter e no facebook, algumas pessoas falando que para mostrar um elemento do HTML no Console do Groogle Chrome, você precisa apenas escrever o ID desse elemento. O @johnjbarton esclareceu que isso acontece porque todos os IDs dos elementos SÃO variáveis globais no javascript. Veja mais detalhes abaixo:
O Padrão:
O HTML5 especifica que o objeto window pode ter uma chave de propriedade na qual o valor dela é um elemento html se:
- Existe exatamento 1 elemento DOM em que a propriedade ‘id’ tem o valor da chave
- Existe exatamente 1 elemento DOM que a propriedade ‘name’ tem o valor da chave. O elemento deve ser um tipo: a, applet, area, embed, form, frame, frameset, iframe, img, object.
Exemplo, no site da Tribo do CI você pode abrir o console do chrome e digitar: window[‘branding’] ou simplesmente branding. Aparecerá a tag header com id=’branding’. Se existe mais de uma tag encontrada, regras diferentes são aplicadas. Com isto em mente, veja outro exemplo abaixo:
<div id=”foo”></div>
O elemento acima pode ser acessado via window.foo ou, como todas as propriedades de window, apenas foo. Por exemplo, no console do Chrome, você pode fazer:
> "foo" in window
true
> foo
<div id=?"foo">?</div>?
Firefox
No firefox funciona um pouco diferente
> "foo" in window
false
> typeof foo // Essa variável existe?
object
Element referenced by ID/NAME in the global scope.
Use W3C standard document.getElementById() instead.
> foo
[object HTMLDivElement]
Element referenced by ID/NAME in the global scope.
Use W3C standard document.getElementById() instead.
> "foo" in window
true
O que aconteceu? inicialmente não existe a propriedade window.foo. Mas após a primeira chamada, seja diretamente ou pela variável global, a propriedade é criada.
Conclusão
Existe uma padronização do HTML5 na qual os ID’s dos elementos se tornam propriedades de window, por isso que essa facilidade é uma novidade para nós. Cabe agora, aos maníacos de boas práticas, nos dizer qual seria a maneira mais correta de utilizar essa feature.
Esse post é uma versão brasileira de 2ality – DOM: elemtn IDs are global variables.
