Como criar um seletor com $ em Javascript

Quando comecei a utilizar prototype e depois jQuery me questionei como eles conseguiram fazer isto:

$(‘elemento’).hide()

Neste post vou mostrar qual a lógica que o engine do Javascript aceita para que isto seja possível.

A lógica é bem simples:

Vou usar getElementById para facilitar o entendimento.

 lang="js
var $ = function(el) {return(document.getElementById(el));}

O que acontece é o seguinte.

1) Nós criamos a variável $:

 lang="js
var $;

2) e declaramos seu valor como função:

 lang="js
var $ = function() {}

O que já nos permite chamar $ desta forma $()

3) Criamos um argumento para a função:

 lang="js
var $ = function(el) {}

4 ) E buscamos o elemento pelo ID, sendo o identificador o valor passado no argumento “el”:

 lang="js
var $ = function(el) {return(document.getElementById(el));}

Com isto já é possível realizar o seguinte:

 lang="js
var valor = $('elementoQualquer').value;
var html = $('outroElemento').innerHTML;

Legal né?
Se você for criativo, você poderá criar o negócio para selecionar o elemento a partir do tipo de seletor CSS, tal qual jQuery.

É isso ai. Uma dica simples, mas legal!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *