Créer un court alias pour document.querySelectorAll

Cela semble fonctionner:

 var queryAll = document.querySelectorAll.bind(document); 

querySelectorAll renvoie une référence à la fonction querySelectorAll , en changeant le contexte de 'this' dans la méthode querySelectorAll pour être l'objet du document.

La fonction bind n'est supportée que dans IE9 + (et tous les autres navigateurs) – https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind

Mise à jour: en fait, vous pouvez créer des raccourcis vers toute une gamme de méthodes de document comme ceci:

 var query = document.querySelector.bind(document); var queryAll = document.querySelectorAll.bind(document); var fromId = document.getElementById.bind(document); var fromClass = document.getElementsByClassName.bind(document); var fromTag = document.getElementsByTagName.bind(document); 

L'interpréteur JavaScript jette un arror car querySelectorAll () doit être invoqué dans le contexte du document.

La même erreur est lancée lorsque vous essayez d'appeler console.log () alias.

Donc vous devez l'envelopper comme ceci:

  function x(selector) { return document.querySelectorAll(selector); } 

Cela fonctionnerait, vous devez appeler l'alias en utilisant call() ou apply() avec le contexte approprié.

 func.call(context, arg1, arg2, ...) func.apply(context, [args]) var x = document.querySelectorAll; x.call(document, 'body'); x.apply(document, ['body']); 

 function x(expr) { return document.querySelectorAll(expr); } 

Ma solution couvre les quatre cas d'utilisation suivants:

• Document.querySelector (…)
• Document.querySelectorAll (…)
• Element.querySelector (…)
• Element.querySelectorAll (…)

Le code:

 let doc=document, qsa=(s,o=doc)=>o.querySelectorAll(s), qs=(s,o=doc)=>o.querySelector(s); 

En termes de paramètres, le sélecteur s est requis, mais l'objet élément conteneur o est facultatif.

Usage:

• qs("div") : recherche le document entier pour le premier div, renvoie cet élément
• qsa("div") : recherche le document entier pour toutes les divs, renvoie un nodeListe de tous ces éléments
• qs("div", myContainer) : des requêtes juste dans l'élément myContainer pour la première div, renvoie cet élément
• qsa("div", myContainer) : Des requêtes juste dans l'élément myContainer pour toutes les divs, renvoie un nodeList de tous ces éléments

Pour rendre le code légèrement plus court (mais pas aussi efficace), le code qs pourrait être écrit comme suit:

 let qs=(s,o=doc)=>qsa(s,o)[0]; 

Le code ci-dessus utilise les fonctions ES6 ( let , les fonctions fléchées et les valeurs par défaut des paramètres). Un équivalent ES5 est:

 var doc=document, qsa=function(s,o){return(o||doc).querySelectorAll(s);}, qs=function(s,o){return(o||doc).querySelector(s);}; 

Ou la version équivalente ES5 plus courte mais moins efficace de qs :

 var qs=function(s,o){return qsa(s,o)[0];}; 

Voici une démo de travail. Pour s'assurer qu'il fonctionne sur tous les navigateurs, il utilise la version ES5, mais si vous utilisez cette idée, n'oubliez pas que la version ES6 est plus courte:

 var doc = document; var qs=function(s,o){return(o||doc).querySelector(s);}, qsa=function(s,o){return(o||doc).querySelectorAll(s);} var show=function(s){doc.body.appendChild(doc.createElement("p")).innerHTML=s;} // ____demo____ _____long equivalent______ __check return___ _expect__ // | | | | | | | | let one = qs("div"); /* doc.querySelector ("#one") */ show(one .id ); // "one" let oneN = qs("div",one); /* one.querySelector ("div") */ show(oneN .id ); // "oneNested" let many = qsa("div"); /* doc.querySelectorAll("div") */ show(many .length); // 3 let manyN = qsa("div",one); /* one.querySelectorAll("div") */ show(manyN.length); // 2 

 <h3>Expecting "one", "oneNested", 3 and 2...</h3> <div id="one"> <div id="oneNested"></div> <div></div> </div>