Alcune domande su come i selettori jquery attraversano il dom

Question

Come faccio a sapere cosa attraversa il DOM e cosa no?

$('div p') 

Sembra che questo restituisce tutti gli elementi div e poi fa un'altra scansione per gli elementi P su ciascun elemento DOM che è stato restituito nella prima ricerca div.

$('div .foo') 

Le classi non sembrano scansionare il dom. Filtrano solo la lista precedente $ ('div') per gli elementi che contengono le classi foo. Se un figlio di $ ('div') ha classe foo non è selezionato.

$('div, div') 

Non contiene duplicati. Quindi sembra che stia effettuando la scansione solo una volta con un elenco di lambda che possono essere confrontati o meno. Ma questo diventa davvero molto confuso quando si hanno filtri come: contains ('x') che sembrano come se possano recitare il dom da soli.

Quindi, come funzionano questi selettori? Fa 'div .foo' attraversa prima solo i div e poi fa un filtro per le classi che contengono foo, o viene in qualche modo trasformato in un calcolo che dice quando tag == Div & & class == pippo. Che dire quando ci sono più selettori? Si presentano nell'ordine in cui compaiono sulla pagina senza fare domande, facendomi sentire come se avesse scansionato il dom una volta sola. Forse ordina e rimuove i duplicati prima di tornare?

Answer 1

jQuery ottimizza i selettori in base a ciò che è più veloce. Se esiste un metodo supportato dal browser nativo per ottenere un elemento (getElementById ecc.) Lo utilizzerà, altrimenti verrà filtrato in base ai risultati dei metodi supportati in modo nativo.