Javascript querySelector et getElementById [fermé]

122

J'ai entendu dire que querySelector& querySelectorAllsont de nouvelles méthodes pour sélectionner des DOMéléments. Comment se comparent-ils aux anciennes méthodes, getElementByIdet getElementsByClassNameen termes de performance et visionneur?

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

Existe-t-il une recommandation de bonnes pratiques pour quel ensemble natif utiliser?

javascript jquery dom

— vaToEleven
source

Définissez mieux. Ils sont presque entièrement différents.

C'est comme demander "une clé à une seule taille est-elle meilleure qu'une clé à molette?" La réponse est: ils sont plus puissants et plus flexibles, et ainsi de nombreuses occasions supérieures, mais getElementByIdet getElementsByClassNamesont toujours idéales aux fins de leurs noms décrivent.

— Lonesomeday

Oh, et qS/qSApeut être utilisé à partir de n'importe quel contexte d'élément, mais gEBIne peut être utilisé qu'à partir du documentcontexte.

getElementByIdfait correspondre les idattributs pour trouver des nœuds DOM, tandis que les querySelectorrecherches par sélecteurs. Donc , pour un exemple de sélection invalide <div id="1"></div>, getElementById('1')fonctionnerait tout querySelector('#1')échouerait, à moins que vous lui dites de faire correspondre l' idattribut (par exemple querySelector('[id="1"]').

— Samuel Elh

Juste un FYI pour quiconque lit ceci, mais querySelectoret querySelectorAllsont entièrement pris en charge maintenant. caniuse.com/#feat=queryselector

— Telarian

Réponses:

132

«Mieux» est subjectif.

querySelector est la nouvelle fonctionnalité.

getElementByIdest mieux pris en charge que querySelector.

querySelectorest mieux pris en charge que getElementsByClassName.

querySelectorvous permet de rechercher des éléments dont les règles ne peuvent pas être exprimées avec getElementByIdetgetElementsByClassName

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

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

— Quentin
source

Prise en charge de querySelector: caniuse.com/#feat=queryselector

— tazboy

@JasonVanDerMeijden - Peu susceptible d'être significatif, susceptible de varier d'un navigateur à l'autre.

— Quentin

Très bonne réponse et voici quelques tests de référence

— angel.bonev

pourquoi mieux pris en charge l' ordre: getElementById> querySelector> getElementsByClassName, parce que je pensais getElementsByClassNamedevrait avoir le même niveau de soutien getElementById?

— Lei Yang

Cette réponse ne semble pas toucher à la différence entre les méthodes, en particulier en termes de performances.

— Dror Bar

Les fonctions getElementByIdet getElementsByClassNamesont très spécifiques, tandis que querySelectoret querySelectorAllsont plus élaborées. Je suppose qu'ils auront en fait une performance pire.

Vous devez également vérifier la prise en charge de chaque fonction dans les navigateurs que vous ciblez. Plus il est récent, plus la probabilité de manque de support ou de "buggy" est élevée.

— Thiago Negri
source

@thomas votre lien est en panne. Y a-t-il un lien fonctionnel quelque part?

— user5508297

Il existe plusieurs versions archivées: web.archive.org/web/20160108040024/http : //jsperf.com/... Mais le test est en fait très ancien (2010), donc le résultat pourrait être très différent avec des moteurs plus modernes.

— thomas

La page archivée est en fait dynamique et vous permet de relancer le test sur votre navigateur actuel. querySelectorAll est toujours plus lent d'environ 37% sur mon navigateur. (Chrome 71 - vgy.me/TwGL3o.png ) Il convient également de noter que getElementById renvoie un résultat en direct, ce qui signifie que si vous modifiez le DOM, le changement sera reflété par le résultat obtenu par getElementByID (s'il est dans la portée) alors que le nodelist retourné par querySelectorAll est un instantané, par exemple, comme les choses étaient au moment de l'appel, le résultat ne reflétera pas les modifications ultérieures du DOM.

— W.Prins

nodelist ... is not livepouvez-vous fournir de la documentation à ce sujet? @ W.Prins les deux méthodes renvoient le Elementtype.

— Maximilian Burszley

Ah, je vois que j'ai fait une faute de frappe, veuillez accepter mes excuses! J'aurais dû écrire "getElementsByClassName" là où j'ai écrit "getElementByID", par exemple, c'est getElementsByClassName (et similaire) qui retourne un jeu de résultats en direct ". c'est un instantané.

— W.Prins