Selección por ID (era Re: [jQuery-es] Estructurar código)

[Choan C. Gálvez]

Hola de nuevo.

On 11/28/06, stripTM <fer en striptm.com> wrote:
> ¿entonces "#lienzo #news" jQuery lo maneja de manera diferente que como
> lo hacen los selectores de css y lo dejá en "#news"?

No exactamente.

* Cuando se utiliza un selector simple de tipo ID (`#paco`), jQuery
optimiza la búsqueda usando `document.getElementById`.

* Si el selector incluye el combinador _descendiente_ (más conocido
como `#hay div.espacios`), jQuery busca el match entre los
descendientes de los elementos que casan con el primer selector.

Por tanto...

    $("#unid div.unaclase);

Viene a traducirse en:

1. Selecciono el elemento con id = unid
2. Selecciono los elementos descendientes de ese elemento que son de
tipo `div` cuyo className` incluye la palabra "unaclase" (y devuelvo
esta colección).

Pero

    $("#unid #otroid");

Se traduce en:

1. Selecciono el elemento con id = unid.
2. Selecciono el elemento con id = otroid

En resumen, que pasa olímpicamente del parentesco.

Lo puedes comprobar sustituyendo "#lienzo #news"  por "#abraracurcix
#news". O incluso "div.destonohayporaqui #lienzo".

En resumen, aquí hay una "sobreoptimización" que no en todos los casos
es adecuada. Ergo:

* Si el selector incluye un selector simple de tipo ID, todo lo que
lleve delante no va a hacer sino añadir trabajo innecesario (e inútil)
a la selección.

* Si (hay casos, los he vivido) es importante el contexto y no la
velocidad, se puede usar "#ancestro div#coso" (de esta manera no se
seleccionará "#coso" si no es descendiente de "#ancestro" puesto que
no se aplicará la optimización).

* Si realmente quieres ir a toda pastilla,
`$(document.getElementById("lienzo"))` es lo más rápido que puedes
utilizar, puesto que ni siquiera llegará a ser procesado por el parser
de expresiones regulares.

Salud.
-- 
Choan
<http://choangalvez.nom.es/>

Scriptia - Javascript y buenas prácticas en español
<blog.scriptia.net>