Traduzco este artículo de Andrea Giammarchi sobre un nuevo motor ultraligero de selección de elementos DOM a partir de cuatro selectores CSS básicos:

Gracias a los nuevos métodos DOM introducidos recientemente en los navegadores más comunes (p.e. querySelectorAll) esperamos no tener que necesitar librerías completas para implementar los selectores CSS comunes. Hoy día, esta podría ser la base para crear cualquier tipo de motor de selección pero aún nos faltan los navegadores anticuados como Internet Explorer versiones 6 o 7, ambos muy lejos de los estándares W3 y con el motor Javascript más lento de la industria.

Al mismo tiempo, cualquier que sea el gran motor o API de selección que tengamos bajo control, los selectores más usados son realmente pocos:

• #id
• .class
• tag
• tag.class

Las razones detrás de este hecho son diferentes, pero en mi opinión la más válida es que los Desarrolladores Web usamos selectores CSS de la misma forma que creamos archivos CSS, y puesto que CSS se ha convertido en un estándar recientemente gracias al pleno soporte de Internet Explorer a CSS 2.1 (aunque otros navegadores funcionan con CSS3 desde hace mucho) nuestros archivos CSS y nuestros selectores serán así de simples durante un largo tiempo.

De acuerdo con eso, y ya que tenemos algunos buenos prototipos intermediarios como getElementsByClassName, todo lo que necesitamos es un motor de selección básico que sea capaz de recuperar los nodos de la forma más rápida posible.

Desde luego, si querySelectorAll está presente, este método será necesario, pero ¿qué hacer cuando no esté disponible?

La librería Sizzle es uno de los motores de selección más famosos, pero necesitamos "mover" 4KB de código minificado y comprimido (no es tanto pero a menudo es más de lo necesario) para obtener algo simple, especialemnte si los selectores indicados arriba son los que usamos en nuestro proyecto.

La librería Essential Selector

Quizás suene obvio, pero para cubrir los primeros 3 selectores de la lista necesitamos el rápido getElementById, el estándar getElementsByTagName y el aún no estándar getElementsByClassName, fácil de implementar en navegadores antiguos. ¿Y querySelectorAll? Superfluo en este caso, pero aún así bienvenido, obviamente. Los 4 selectores de arriba son los únicos considerados en mi pequeña librería: cerca de 1Kb minificada y comprimida, adaptada para librerías y/o desarrollo de GUI.

Se puede echar un vistazo directamente en el repositorio para comprobar que se comportará realmente rápido en cada navegador y que devolverá resultados en un tiempo razonable.

Filosofía de Essential Selector

Los selectores #id, .class, tag y tag.class serán rápidos para cada navegador mientras que los selectores más complejos dependerán del navegador. El foco principal está en los selectores más usados pero si decides usar uno más específico:

// Ejemplo de selector CSS
$e("div ul.myclass p");

los navegadores más modernos tardarán cerca de 1 milisegundo mientras que los más antiguos tendrán que llevar a cabo una modificación específica del CSS. Esto significa que los navegadores tendrán aproximadamente el mismo retardo para un selector como "div p" y "div p #content ul li.testcase" pero al menos, si el selector es compatible con el motor CSS del navegador, el resultado será el mismo para cada navegador.

Es más, debido a la ligereza de la librería, aquellos navegadores con errores no estarán perfectamente soportados. Por ejemplo, hay una versión de Opera que no comprende className en mayúsculas... bueno, ese no es nuestro problema, es un error específico del navegador de forma que debería resolverlo su creador. Lo mismo vale para casos extraños... vamos, no podemos considerar cada versión alfa/beta/inestable/intermediaria/vieja, así que si el CSS funciona, el navegador responderá como se espera.

Esta es la filosofía detrás de este simple motor de selección, en el que una búsqueda como

$e("div p")

tendrá sentido, mientras que otra como

$e("div[class^=whatever]")

no lo tendrá, a causa de ese selector aún no estándar.

Resumen

¿Quieres un selector ligero que funcione bien con entornos diarios? Prueba la librería Essential, y si no ya te dí una alternativa válida y plenamente compatible ;-)