Tribo do C.I.

Só mais um blog de informática (só que não)

DOM: id dos elementos são variáveis globais

março 31st, 2014

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.
Cheap buy levitra online cheap candian levitra celebrex buy cheap brand viagra
Best Prices For All Customers! Cheap Prednisone 20mg . Fastest Shipping, buy prednisone Australia.
4 days ago – Estrace -cream 15gm – Low prices and discounts buy estrace -cream Online – Click Here Find store pill estrace -cream in canada online fedex

Sobre Sheldon Led:
Desenvolvedor e palestrante desde 2009. Já trabalhou com sistemas legados e software de gestão, mas hoje atua somente com web. Já participou do desenvolvimento de alguns portais governamentais e sites utilizando a plataforma Joomla e WordPress. Apesar de ser um desenvolvedor full-stack, tem focado seus estudos em tecnologias front-end e busca apoiar e colaborar em projetos envolvendo Software Livre, seja em eventos, material para estudo ou contribuição de código.

Tribo do C.I.

Tribo do C.I.

Só mais um blog de informática (só que não)