Pourquoi n'document.querySelectorAll retour d'un StaticNodeList plutôt que d'un véritable Tableau?

Il m'énerve que je ne peux pas juste faire document.querySelectorAll(...).map(...) même dans Firefox 3.6, et je n'ai toujours pas de réponse, donc je pensais que je cross-post sur DONC la question de ce blog:

http://blowery.org/2008/08/29/yay-for-queryselectorall-boo-for-staticnodelist/

Personne ne sait d'une raison technique pour laquelle vous n'obtenez pas un Tableau? Ou pourquoi un StaticNodeList ne pas hériter d'un Tableau de telle manière que vous pouvez utiliser map, concat, etc?

(BTW si c'est juste une fonction que vous voulez, vous pouvez faire quelque chose comme NodeList.prototype.map = Array.prototype.map;...mais encore une fois, pourquoi cette fonctionnalité est (intentionnellement?) bloqué en premier lieu?)

  • En fait getElementsByTagName ne pas retourner un Tableau, mais une collection, et si vous voulez l'utiliser comme un Tableau (avec des méthodes comme concat etc.) vous devez convertir votre collection dans un Tableau en faisant une boucle et copier chaque élément de la collection dans un Tableau. Jamais personne ne s'est plaint à ce sujet.
InformationsquelleAutor Kev | 2010-04-08
  1. 75

    Je crois que c'est une décision philosophique de la W3C. La conception du DOM du W3C [spec] est tout à fait perpendiculaire à la conception de JavaScript, le DOM est signifiait à plate-forme et du langage neutre.

    Décisions comme "getElementsByFoo() renvoie d'un ordre NodeList" ou "querySelectorAll() renvoie une StaticNodeList" sont très intentionnel, ainsi que les implémentations n'avez pas à vous soucier de l'alignement de leurs retourné structure de données basée sur la fonction de la langue dans les implémentations (comme .map être disponibles sur les Tableaux en JavaScript et Ruby, mais pas sur les Listes en C#).

    Le W3C but faible: ils disent une NodeList doit contenir un readonly .length de la propriété de type unsigned long parce qu'ils croient que chaque mise en œuvre à que, mais ils ne disent pas explicitement que le [] l'indice de l'opérateur doit être surchargé en charge l'obtention de position des éléments, parce qu'ils ne veulent pas entraver le pauvre petit langage qui vient qui veut mettre en œuvre getElementsByFoo() mais ne peut pas supporter la surcharge d'opérateur. C'est une conséquence courante de la philosophie dans une grande partie de la spécification.

    John Resig a exprimé une option similaire que le vôtre, à qui il ajoute:

    Mon argument n'est pas tellement que
    NodeIterator n'est pas très DOM-comme c'est
    qu'il n'est pas très JavaScript-comme. Il
    ne pas tirer parti des fonctionnalités
    présent dans le langage JavaScript et
    les utiliser au mieux de ses capacités...

    Je ne peu faire preuve d'empathie. Si le DOM a été écrit spécifiquement avec les fonctions JavaScript à l'esprit, il sera beaucoup moins difficile et plus intuitif à utiliser. En même temps, je comprends le W3C, les décisions de conception.

    • Merci, cela m'aide à donner un sens à la situation.
    • J'ai vu votre commentaire sur cet article du blog de la page questionner sur la façon dont vous allez sur la conversion de la StaticNodeList à un tableau. Je partage @mck89 réponse comme la voie à suivre pour la conversion d'un NodeList/StaticNodeList à un Tableau natif, mais qui échoue dans IE (8 obv) avec une JScript erreur, puisque ces objets sont hébergés/"spécial".
    • Vrai, c'est pourquoi je upvoted lui. Quelqu'un d'autre a annulé mon +1 si. Qu'entendez-vous par hébergée/spécial?
    • hébergé variables sont les variables fournies par les "hôtes" de l'environnement (par exemple un navigateur web). Par exemple document, window, etc. IE mettent souvent en œuvre des ces "spécialement" (par exemple en tant qu'objets COM) que, parfois, ne sont pas conformes à une utilisation normale, dans les petites et subtile, comme Array.prototype.slice.call attentat lors d'une StaticNodeList 😉
    InformationsquelleAutor Crescent Fresh
  2. 170

    Vous pouvez utiliser ES2015 (ES6) la propagation de l'opérateur:

    [...document.querySelectorAll('div')]

    va convertir StaticNodeList de Tableau d'éléments.

    Voici un exemple sur la façon de l'utiliser.

    JS:

    [...document.querySelectorAll('div')].map(x => console.log(x.innerHTML))

    HTML:

    <div>Text 1</div>
<div>Text 2</div>

    • Une autre façon est d'utiliser Tableau.à partir de(): Array.from(document.querySelectorAll('div')).map(x => console.log(x.innerHTML))
    InformationsquelleAutor Vlad Bezden
  3. 42

    Je ne sais pas pourquoi elle retourne une liste de noeud au lieu d'un tableau, peut-être parce que, comme getElementsByTagName elle sera mise à jour lors de la mise à jour du DOM. De toute façon une méthode très simple pour transformer ce résultat dans un tableau simple est:

    Array.prototype.slice.call(document.querySelectorAll(...));

    et ensuite vous pouvez faire:

    Array.prototype.slice.call(document.querySelectorAll(...)).map(...);
    • En fait elle n'est pas mise à jour lors de la mise à jour du DOM, et donc plus "statique". Vous devez manuellement à l'appel de l'asq à nouveau pour mettre à jour le résultat. +1 pour le slice ligne.
    • Ouais, comme Kev dit: qSA resultset est statique, getElementsByTagName() resultset est dynamique.
    • IE8 ne supporte querySelectorAll() en mode standard
    InformationsquelleAutor mck89
  4. 12

    Juste pour ajouter à ce Croissant-dit,

    si c'est juste une fonction que vous voulez, vous pouvez faire quelque chose comme NodeList.le prototype.carte = Array.le prototype.carte

    Ne le faites pas! Il n'est pas garanti pour fonctionner.

    Pas de JavaScript et DOM/NOMENCLATURE standard précise que l' NodeList constructeur-même existe en tant que global/window des biens, ou que le NodeList retourné par querySelectorAll va hériter d'elle, ou que son prototype est accessible en écriture, ou que la fonction Array.prototype.map sera effectivement travailler sur une NodeList.

    Une NodeList est autorisé à être un ‘d'accueil ' objet’ (et il est un, en IE et certains anciens navigateurs). Le Array méthodes sont définies comme étant autorisés à fonctionner sur n'importe quel JavaScript native de l'objet " qui expose numérique et length propriétés, mais ils ne sont pas amenés à travailler sur des objets hôte (et dans IE, ils ne le font pas).

    C'est ennuyeux que vous n'obtenez pas toutes les méthodes de tableau sur les DOM listes de tous, et pas seulement StaticNodeList), mais il n'y a aucun moyen fiable autour d'elle. Vous aurez à convertir tous les DOM liste, vous obtenez de retour à un Tableau manuellement:

    Array.fromList= function(list) {
    var array= new Array(list.length);
    for (var i= 0, n= list.length; i<n; i++)
        array[i]= list[i];
    return array;
};

Array.fromList(element.childNodes).forEach(function() {
    ...
});
    • Le tournage, je n'avais pas pensé à ça. Merci!
    • Je suis d'accord +1. Juste un commentaire, je pense que faire de la "var array = []" au lieu de "var tableau = new Array(la liste.la longueur)" wouild rendre le code encore plus courte. Mais je suis intéressé si vous savez qu'il ya peut-être un problème dans ce domaine.
    • Non, pas de problème. new Array(n) donne juste le JS terp une indication sur la durée de la matrice va finir. Qui pourrait lui permettre d'allouer que la quantité d'espace à l'avance, ce qui pourrait potentiellement entraîner une accélération comme la mémoire des réaffectations pourrait être évitée, comme le tableau de pousse. Je ne sais pas si cela aide réellement dans les navigateurs modernes bien... je dirais pas de façon mesurable.
    • Maintenant, il est mis en œuvre dans Tableau.à partir de()
    InformationsquelleAutor bobince
  5. 2

    Je pense que vous pouvez tout simplement faire à la suite

    Array.prototype.map.call(document.querySelectorAll(...), function(...){...});

    Il fonctionne parfaitement pour moi

    InformationsquelleAutor Max Leps
  6. 0

    C'est une option que je voulais ajouter à la gamme d'autres possibilités suggérées par d'autres ici. Il est destiné pour le plaisir intellectuel et est pas conseillé.

    Juste pour le plaisir, ici est une façon de "forcer" querySelectorAll à s'agenouiller et se prosterner devant vous:

    Element.prototype.querySelectorAll = (function(QSA){
    return function(){
        return [...QSA.call(this, arguments[0])]
    }
})(Element.prototype.querySelectorAll);

    Maintenant il se sent bien à l'étape de tous les plus de cette fonction, montrer qui est le patron.
    Maintenant, je ne sais pas ce qui est mieux, la création d'un nouveau nommé fonction wrapper et alors votre code utiliser ce nom bizarre (assez bien jQuery-style) ou de remplacer la fonction comme ci-dessus une fois pour le reste de votre code devrait toujours être en mesure d'utiliser l'original DOM nom de la méthode querySelectorAll.

    • Une telle approche permettrait d'éliminer l'utilisation possible de sous-méthodes

    Je ne le recommande pas, en aucune façon, à moins que vous honnêtement ne pas donner un [vous savez ce qu'].

    InformationsquelleAutor vsync