Algunas preguntas sobre cómo jquery selectores atraviesan el dom

Question

¿Cómo sé qué atraviesa el DOM y qué no?

$('div p') 

Parece que este devuelve todos los elementos div y luego hace otra exploración de los elementos P en cada elemento DOM que fue devuelto en la primera búsqueda div.

$('div .foo') 

Las de clase no parecen escanear el dom. Solo filtran la lista anterior $ ('div') para los elementos que contienen clases foo. Si un hijo de $ ('div') tiene clase foo, no está seleccionado.

$('div, div') 

No contiene engaños. Así que parece estar escaneando solo una vez con una lista de lambdas que o bien se comparan o no lo hacen. Pero esto se vuelve realmente confuso cuando tienes filtros como: contains ('x') que parece que pueden recurse la dom por sí mismos.

Entonces, ¿cómo funcionan estos selectores? Primero, 'div .foo' recorre solo divs y luego hace un filtro para las clases que contienen foo, o de alguna manera se convierte en un cálculo que dice cuando tag == Div & & class == foo. ¿Qué pasa cuando hay múltiples selectores? Aparecen en el orden en que aparecieron en la página sin engaños que me hacen sentir que solo escanearon el dom una vez. Tal vez solo ordena y elimina a los incautos antes de regresar?

Answer 1

jQuery optimiza sus selectores según lo que sea más rápido. Si hay un método compatible con el navegador nativo para obtener un elemento (getElementById, etc.), lo usará, de lo contrario se filtrará en función de los resultados de los métodos compatibles nativamente.