Quelle est la différence entre queryAll et querySelectorAll?
les définitions de la norme DOM semblent presque identiques, et je ne comprends pas la différence.
Quelle est la différence entre queryAll et querySelectorAll .
la logique d'évaluation de la norme DOM est ci-dessous, mais je ne suis pas assez intelligent pour la comprendre.
query & queryAll
pour correspondre une chaîne de sélecteurs relatifs relativeselecteurs par rapport à un ensemble, exécuter ces étapes:
soit le résultat de l'analyse d'un sélecteur relatif à partir de vecteurs relatifs contre ensemble. [Sélecteurs]
si s est un échec, lancez une machine à écrire JavaScript.
retourner le résultat de l'évaluation d'un sélecteur s en utilisant :scope elements set. [Sélecteurs]
la méthode query(relativeSelectors) doit retourner le premier résultat de faire correspondre une chaîne de caractères relative selectors relativeSelectors à un ensemble composé d'un objet contextuel, et nul si le résultat est une liste vide.
la méthode queryAll(relativeSelectors) doit retourner un tableau D'éléments initialisé avec le résultat d'exécuter match une chaîne relative selectors relativeSelectors contre un ensemble consistant en un objet de contexte.
querySelector & querySelectorAll
À portée de match un des sélecteurs de chaîne sélecteurs à l'encontre d'un nœud, exécutez ces étapes:
doit être le résultat de l'analyse des sélecteurs de sélecteurs. [Sélecteurs]
si s est un échec, lancez une machine à écrire JavaScript.
retourner le résultat de l'évaluation d'un sélecteur s par rapport à la racine du noeud en utilisant le noeud racine de détermination de la portée et la méthode de détermination de la portée portée-filtré. [SÉLECTEUR.]
le la méthode querySelector(selectors) doit retourner le premier résultat de l'exécution scope-match a selectors string selectors contre l'objet context, et null si le résultat est une liste vide sinon.
la méthode querySelectorAll(selectors) doit retourner le résultat statique de l'exécution scope-match a selectors string selectors contre l'objet context.
2 réponses
query() et queryAll() acceptent une chaîne de sélection relative, tandis que querySelector() et querySelectorAll() ne le font pas. Un sélecteur relatif est essentiellement un sélecteur qui peut être partiel et démarrer avec un combinateur:
var parentNode = document.getElementById('parentNode'); // document.querySelector('#parentNode');
// Find .childNode elements that are direct descendants (children) of parentNode
// This cannot be done with querySelectorAll() using the existing reference to parentNode
parentNode.queryAll('> .childNode');
// querySelectorAll does allow getting all descendants of parentNode though
parentNode.querySelectorAll('.childNode');
mais plus important encore, queryAll() retourne un "live Elements[] tableau alors que le NodeList retourné par querySelectorAll() est statique, ce qui signifie que les noeuds dans cette liste ne sont pas mis à jour lorsque les changements sont faites à leurs éléments DOM respectifs.
en termes de fonctionnalité, query() et queryAll() peuvent être plus analogues à find() et findAll() , définis dans sélecteurs API Niveau 2 - où vous trouverez également la définition d'un sélecteur relatif - comme les deux groupes de méthode acceptent et travaillent avec des sélecteurs relatifs. Notez que findAll() renvoie également un NodeList statique , de sorte qu'ils ne sont pas encore complètement identiques.
mise à jour 2016
queryAll a été retiré de la DOM spec
actuellement, la différence la plus importante entre queryAll et querySelectorAll est que queryAll (ainsi que query ) était retiré de la spécification DOM .
la version actuelle de la spécification DOM est disponible à:
Note: https://www.w3.org/TR/dom / est une fourche désuète de la norme DOM (voir Fork tracking sur le WHATWG Wiki et le commentaire de Domenic pour plus d'informations).
dernière mention
la dernière version qui comprenait query et queryAll a été publiée le 15 mars 2016:
- http://web.archive.org/web/20160315085447/https://dom.spec.whatwg.org /
- Voir sections 4.2.3. Interface ParentNode et 4.2.6. Collections: Éléments
enlèvement
la prochaine version ne mentionne pas query ou queryAll n'importe où:
- http://web.archive.org/web/20160329233515/https://dom.spec.whatwg.org /
- voir section 4.2.6. Mixin ParentNode
spécification Actuelle
tous les événements de query ou queryAll
dans la norme DOM ont été commentés par Anne van Kesteren le 29 mars 2016.
la spécification DOM actuelle (en date de juillet 2016) ne mentionne pas query ou queryAll du tout:
querySelector et querySelectorAll sont dans la section
4.2.6 Mixin ParentNode .
il semble que la seule API fiable est actuellement querySelector et querySelectorAll
(voir cette réponse pour plus de détails) et selon cette discussion sur GitHub query et queryAll ne sera pas disponible jusqu'à ce que la sous-classification JavaScript des éléments intégrés soit implémentée dans les navigateurs et même alors il sera peu probable de retourner un tableau d'éléments vivants[] tel que décrit dans la réponse par BoltClock .
prise en charge du Navigateur
en date du Juin 2016 il n'y a aucune mention de query et queryAll sur MDN:
d'autre part querySelector et querySelectorAll sont bien documentés et largement soutenus:
- https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
prise en charge du Navigateur de querySelector / querySelectorAll selon puis-je utiliser à partir de juin 2016:
(Voir: http://caniuse.com/queryselector pour des informations à jour)
il n'y a pas d'information disponible sur le support de query et queryAll .
plus d'information
Voir aussi cette réponse pour plus d'informations sur l'utilisation et la prise en charge du navigateur de querySelector et querySelectorAll .