CONSITUER DES COLLECTIONS D'éLéMENTS

illus

script : miniQuery v1.0
langage : javascript
catégorie : fragment
usage : Donnez-lui un élément, une collection d'éléments, un sélecteur css, ou même rien du tout, miniQuery en fera un Array tout propre.
tags : crossbrowser snippet - technique

Concept

La plupart des scripts proposés sur ce site partagent deux objectifs : souplesse d'utilisation et légéreté en termes d'octets. miniQuery est ainsi né de la volonté de disposer d'un sélecteur d'éléments adapté à ces besoins, dont je puisse me servir dans de nombreux scripts.

Le principe de miniQuery est de convertir les diffétents types de sélections d'éléments possible dans un format homogène. Donnez à miniQuery un élément (HTMLElement), une collection d'éléments (Object, Array, ou HTMLElementCollection), un sélecteur css (String), ou même rien du tout (undefined), miniQuery en fera un Array tout propre et simple à manipuler.

Usage

Commençons par la fin !

Que faire de la sélection obtenue grâce miniQuery ?

C'est très simple : Dans tous les cas, miniQuery retourne un tableau (Array) contenant une série d'éléments HTML : [element1, element2, elementN].

On pourra donc dans tous les cas traiter le résultat obtenu en parcourant les lignes du tableau :

var selec = miniQuery( truc ); // on verra plus loin à quoi correspond "truc".
 
for (var i = 0, ln = selec.length; i < ln; i++) {
	doSomeThing( selec[ i ] );
}

Et si vraiment il n'y a que le premier élément de la collection qui vous intéresse (si vous voulez sélectionner un le <body> par exemple), vous pouvez très bien éviter le recours à une boucle : 

var selec = miniQuery( bodyElement ); // on verra plus loin comment sélectionner la balise <body>
 
doSomeThing( selec[ 0 ] ); // select[ 0 ] renvoie au premier élément de la sélection

Comment sélectionner les éléments ?

Comme expliqué au paragraphe précédent, le principe est de pouvoir fournir à miniQuery n'importe quelle type de sélection.

Supposon le code HTML suivant :

<body>
  <p>
    Oh le joli <span id="truc">paragraphe</span> avec un span dedans !
  </p>
  <p>
    Un autre paragraphe, mais sans span.
  </p>
</body>

Pour sélectionner notre span, toutes les méthodes suivantes seront valides

var param = document.getElementById("truc");       // <span>
var selec = miniQuery( param );                    // [ <span> ]
 
// ou bien :
var param = document.querySelector("#truc");       // <span>
var selec = miniQuery( param );                    // [ <span> ]
 
// ou bien :
var param = "#truc";                               // "#truc"
var selec = miniQuery( param );                    // [ <span> ]
 
// ou bien :
var param = document.getElementsByTagName("span"); // [ <span> ]
var selec = miniQuery( param );                    // [ <span> ]
 
// ou bien :
var param = "span";                                // "span"
var selec = miniQuery( param );                    // [ <span> ]

Voici également ce que retourneraient d'autres requêtes :

// sélection des paragraphes
var param = document.getElementsByTagName("p");    // [ <p>, <p> ]
var selec = miniQuery( param );                    // [ <p>, <p> ]
 
// sélection du body
var param = "body";                                // "body"
var selec = miniQuery( param );                    // [ <body> ]
 
// tentative de sélection d'un élément inexistant
var param = document.getElementById("machin");     // undefined
var selec = miniQuery( param );                    // []

Il est probable que dans la plupart des cas, vous préfériez utiliser la syntaxe par sélecteurs css.
En ce cas, il est bon de savoir que miniQuery tentera de faire appel au sélecteur querySelectorAll des navigateurs modernes. Pour les navigateurs qui ne supportent pas cette méthodes (IE7, par exemple), miniQuery propose une alternative simplifiée qui dans tous les cas évite les erreurs javascript, et permet en outre d'avoir recours aux sélecteurs les plus répandus, à savoir :

  • E : Correspond à tout élément E (c.à.d., un élément de type E).
  • .foo : Correspond à tout élément dont la classe est "foo".
  • #bar : Correspond à tout élément dont l'id est "bar".

Intégration

Pour pouvoir faire appel à miniQuery(), placez simplement dans votre page le bout de code suivant, entre les balises <head> et </head> de votre page : 

<script src="miniQuery.min.js" type="text/javascript"></script>

Téléchargement

Vous trouverez dans ce zip le script en version minifiée (0.4Ko) et en version commentée. 

compatibilité :
Internet Explorer (5.5+) Firefox Safari Opera Google Chrome
(autres navigateurs non testés)

Commentaires