Biblioteca (Libreria)

Si llevas tocando JavaScript poco tiempo quizá aun no la hayas usado, pero por poco que lleves usando algun framework (biblioteca/libreria) seguro que te suena.
La función $ viene siendo de las más usadas o ampliamente implementadas en cualquier libreria JS para el manejo del DOM.

Que hay del DOM

DOM son las siglas de Document Object Model. La página html que estás viendo se estructura en el navegador como un árbol, en el que cada uno de los nodos del árbol es un objeto. El hecho de que se el navegador controle la página como un grupo de nodos Objeto beneficia al programador que quiere trabajar con esos objetos. Tratando cada elemento como un objeto le podemos asignar propiedades, eliminarlo o crear nuevos dinámicamente.

Cuando modificas un objeto visible del DOM los cambios se ven reflejados en el navegador. Si quieres ver más cosas sobre el DOM puedes ver la gran documentación de Mozilla de cómo Gecko (Motor de renderizado del a fundación Mozilla) implementa el DOM (DOM Gecko). Si cuando hayas terminado con esto te apetece profundizar más y tienes la posibilidad de poner el ‘Modo Dios’ de lectura puedes pelearte con la docu del w3c, que son los que dicen como tiene que ser el DOM (w3c DOM).

Tocando los nodos del DOM

Visto lo visto, si queremos que la página cambie sin recargar nos va a tocar modificar los elementos del DOM en el lado del cliente. Para acceder a un elemento que queremos modificar tenemos que acceder a el como a un objeto que es. Todos los objetos tienen un padre, y el padre de todos (la raíz del árbol) es el documento en si, es decir, el objeto document.

Para acceder al árbol existen distintas funciones. Estas nos permiten acceder al primer hijo, al último o a la lista de hijos y seleccionar el que queremos mediante corchetes:

result = document.firstChild.childNodes.length;//2
result = document.firstChild.childNodes[0];// [object HTMLHeadElement]
result = document.firstChild.childNodes[1];// [object HTMLBodyElement]
result = document.firstChild.childNodes[1].childNodes[n];//[object HTMLDivElement]

Acceder así a los elementos es bastante arido, por eso hay otras funciones que nos acortan el trabajo

Funciones que devuelven un HTMLCollection.

La definicion en IDL es:
interface HTMLCollection {
readonly attribute unsigned long length;
Node item(in unsigned long index);
Node namedItem(in DOMString name);
};

result = document.getElementsByTagName("div");//[object HTMLCollection]
result = document.getElementsByName("nombre");//[object HTMLCollection]
result = document.getElementsByClassName("nombreDeLaClase");//[object HTMLCollection]

Seleccionar por identificador a veces es más comodo porque el id debe de ser único

result = document.getElementById("identificador");// [object HTMLDivElement] porque hemos dado ese id a un div

Si tenemos más de un elemento con el mismo identificador (cosa que no debe ocurrir) hay que tener cuidado. La funcion ‘getElementById’ devuelve un solo Element (de ahi su nombre en singular) así que nos devolverá la primera ocurrencia solamente.

Los corchetes[] molan

La definición en del objeto HTMLColection nos da una interfaz para seleccionar un elemento concreto ya sea por nombre o por identificador, pero los corchetes facilitan mucho la vida del programador. Se puede invocar por nombre, identificador o numero de orden del elemento de la colección que queramos:

var result = document.getElementsByClassName("nombreDeLaClase");
result.namedItem("nombre") === result["nombre"];// true
result.item("identificador") === result["identificador"];// true
result.item(0) === result[0];// true
result.length;// 1

Para acceder a un elemento que esté en la página usamos a la estrella de las funciones de manejo del DOM:

var miElemento = document.getElementById("identificador");

Así tenemos en la variable ‘miElemento’ el elemento/objeto del DOM con id «identificador». No tenemos que sabernos la ruta completa.

Y una vez seleccionado el elemento que queramos podemos acceder a su contenido en formato HTML. Con innerHTML podemos leer y escribir su contenido directamente. Este método no es un estándar de la especificación del lenguaje ECMAScript, pero todos los navegadores lo implementan. Lo inventó microsoft para una de sus primeras versiones del explorer y al extenderse su uso por comodidad, todos los browsers lo impementaron. Tan sencillo como:

result = document.getElementById("identificador").innerHTML;//a

Con todo esto manejamos el DOM a nuestro gusto, pero ¿me estoy saliendo del tema? no. Como hemos visto se puede acceder de distintas formas a los elementos de nuestra página. Por nombre, id, clase o posición en el árbol, pero escribir estas funciones con un nombre tan largo, con nombres tan parecidos para hacer lo mismo y obtener una tipo de objeto un tanto extraño no es muy cómodo para desarrollar.
La función dolar tiene que ver mucho con el manejo del DOM, y es que esta función surge a raíz de esta problemática.

PrototypeJS

En Prototype la funcion $ es la forma acortada de ‘document.getElementById’. En realidad tiene algo más de potencia ya que si le pasamos varios argumentos nos devolverá un vector con esos elementos seleccionados.
Así que devuelve o un elemento o un array con elementos. Ojo, si los elementos no existen en el árbol nos devolverá un array vacio.

Para seleccionar elementos del DOM Prototype viene con el metodo $F que viene a hacer lo mismo que $ pero dirigido a formularios. Como ellos dicen “es un alias comodo de Form.Element.getValue”.

Pero la funcion que realmente aporta ahorro al desarrollador es la funcion doble dolar $$(). El parámetro pasado a esta funcion debe ser un string que contenga el elemento o elementos a seleccionar, pero aqui viene lo bueno, acepta sintaxis CSS. Es decir que si quemos selecciona un elemento que tenga class con valor “miElemento” introducirmos : $$(“.miElemento”). Hasta aquí poca novedad, pero y si queremos seleccionear los elementos de una lista que tnegan class “miElemento”, pues la llamada será así: $$(“li.miElemento”) y así con todo tipo de selectores css http://www.w3.org/TR/css3-selectors/
A diferencia de $, $$ devolverá siempre un vector de Element.

MooTools

En Mootoos encontramos algo parecido en cuanto a funciones dolar se refiere. La funcion dolar está orientada a identificadores y encontramos los selectores CSS en la doble dolar. Contiene los selectores CSS3.
El selector CSS de MooTools se llama Slick. Lo sacaron para la version 1.3 de la librería y mejora en un 50% el selector de la version 1.2. A demás Slick es más rapido que el selector CSS de Prototype en un porcentaje variable pero en todos los navegadores.
Tambien le podemos pasár a la funcion $$ uno o más objetos Element, y devolverá una instancia de Element que los contenga.
Como vemos Dollars de MooTools añade algo más de funcionalidad que el Dollars de Prototype. En MooTools obtendremos de $$ una instancia del objeto Element de MooTools (como en Prototype) pero la mejora está en que acepta no solo cadenas con selectores si no también elementos propios.

jQuery

jQuery es una libreria orientada al DOM, de hecho la funcion $ es un alias de la funcion jQuery. La funcion $ nos devolverá un objeto jQuery que es la que contiene toda las funciones de la librería. Es la forma de trabajar en jQuery, al objeto que tenemos le hacemos lo que queremos.
Pero a la hora de pasarle parámetros, el $ de jQuery es el más versatil.
Acepta selectores CSS, elementos del DOM o arrays de elementos. A demás con los selectores podemos indicarle un contexto en el que seleccionarlo, si es que sabemos donde está lo que buscamos y no queremos que nos devuelva partes que estén más allá de ese ambito.
El selector jQuery es el más rápido de las tres librerías. Pero no solo de selectores vive el hombre. $ de jQuery acepta codigo HTML a pelo. ¿Y para qué? para generarlo dinamicamente. Esto nos permitirá crear partes de la pagina al vuelo para insertarlas donde queramos.
Por si fuera poco $ en jQuery también es un alias del metodo “$(document).ready” (que es como asignar un metodo en “document.onload”). Así que si le pasamos como parámetro una funcion, esta será ejecutada tras la carga completa del documento.
Sin duda es la función Dollar más versátil. Esta librería está orientada a usar el $ y a usar el DOM, de esta manera ahorra muchas lineas de código a los programadores que solo utilicen JavaScript para manejar el DOM, que son la mayoría, por eso está teniendo tanto exito.

Está claro que el $ no da la felicidad, por eso cada cual se lo implementa a su manera. Es el nombre de función más representativo que existe, corto y poco común. Por corto le proporciona ahorro de tiempo en la programación, y lo poco común le proporciona ahorro de tiempo en la lectura del código.
Como en definitiva para una gran proporcion de programadores vienen usando JavaScript para manejar el DOM sin incluir mucha más logica en las aplicaciones JS, el seleccionar elementos (sea estilo CSS o no) el mejor alias para un selector es el caracter Dolar.
Sinceramente, aunque sea para acortar la funcion “document.getElementById” ya es útil. Si como hemos visto le añadimos algunas funcionalidades extra mejor que mejor.