web-dev-qa-db-fra.com

Javascript querySelector vs getElementById

J'ai entendu dire que querySelector & querySelectorAll sont de nouvelles méthodes pour sélectionner les éléments DOM. Comment se comparent-ils aux méthodes plus anciennes, getElementById & getElementsByClassName en termes de performances et de prise en charge du navigateur?

Comment les performances se comparent-elles à l'utilisation du sélecteur de requête de jQuery?

Existe-t-il une recommandation de meilleure pratique pour chaque ensemble natif à utiliser?

84
goesToEleven

"Mieux" est subjectif.

querySelector est la nouvelle fonctionnalité.

getElementById est mieux pris en charge que querySelector.

querySelector est mieux pris en charge que getElementsByClassName.

querySelector vous permet de trouver des éléments avec des règles impossibles à exprimer avec getElementById et getElementsByClassName

Vous devez choisir l'outil approprié pour une tâche donnée.

(Dans ce qui précède, pour querySelector, lisez querySelector/querySelectorAll).

99
Quentin

Les fonctions getElementById et getElementsByClassName sont très spécifiques, tandis que querySelector et querySelectorAll sont plus élaborées. À mon avis, leur performance sera pire.

En outre, vous devez vérifier le support de chaque fonction dans les navigateurs que vous ciblez. Plus il est récent, plus la probabilité de défaut de support ou la fonction est "instable" est élevée.

38
Thiago Negri