Javascript

Sans jQuery

Sélecteurs JavaScript querySelector() et querySelectorAll()

Depuis le CSS3 et surtout le JavaScript ES5, le JavaScript n’a plus grand-chose à envier à la librairie « jQuery »! Et le meilleur exemple sont les sélecteurs querySelector() et querySelectorAll(). Mieux, comme on peut lire dans le tutoriel « jQuery : Équivalent Javascript », jQuery est beaucoup plus lent comparé aux sélecteurs du pur JavaScript. C’est donc devenu depuis (2015) une des fonctionnalités JavaScript que j’utilise le plus!

Un sélecteur permet de trouver un ou des éléments dans le document HTML (DOM). En CSS tout le monde connait les classes, par exemple .maclasse. En JavaScript, on connait bien le très rapide getElementById() mais avec un désavantage, il faut connaitre l’ID! Ou encore getElementsByTagName(), jusqu’à 60 fois plus rapide d’après Craig Buckler (« Native JavaScript Equivalents of jQuery Methods: the DOM and Forms »).

Sélecteurs JavaScript

getElementById()                       sélection par attribut HTML ID.
getElementsByName()                    sélection par attribut HTML NAME.
getElementsByTagName()                 sélection par nom de balise HTML
getElementsByClassName()               sélecteur par identifiant présent dans attribut HTML CLASS.
querySelector() et querySelectorAll()  sélecteurs par sélecteurs CSS.
closest()                              sélecteur par sélecteurs CSS.

Et donc mes deux préférés, querySelector() et particulièrement querySelectorAll(). En fait, c’est « l’équivalent » du fameux signe de dollar jQuery :

<script>
// jQuery
oElement = $("#monID");
oElements = $(".maclasse");
</script>

Trouve le premier élément du document (DOM) avec la classe « .maclasse » :

<script>
var oElement = document.querySelector(".maclasse");
</script>

Trouve tous les éléments du document (DOM) avec la classe « .maclasse » :

<script>
var oElements = document.querySelectorAll(".maclasse");
</script>

Trouve l’élément du document (DOM) avec l’attribut ID « monID » :

<script>
var oElement = document.querySelector("#monID");
</script>

Il va sans dire que si vous connaissez le ID de votre élément, utilise plutôt getElementById(). Mais ce qu’il faut retenir c’est que le querySelector équivaut aux $([sélecteur]) jQuery. Par exemple une chaine plus complexe qui combine id, classe, balise et attribut en une seule instruction :

<script>
var oElement = document.querySelector("#monid .maclasse input[name=`masaisie`]");
</script>

On s’est vraisemblablement inspiré du jQuery, mais aujourd’hui la seule raison qui nous pousse à utiliser la librairie jQuery se limite à la grande quantité de scripts dépendent de jQuery. Mais bon, la migration se fait tranquillement, même si les commentaires sur le forum populaire (acro au badges) « stackoverflow » sont encore pris dans cette « facilité » ou ce cercle vicieux. Personnellement j’arrive à me passer de la librairie jQuery sans problème aujourd’hui!

Web 2 : Contenu, contenant, style et manipulation

He oui, pour un programmeur le Web 2 n’est pas la révolution des potins des médias sociaux ;- ) C’était à l’époque le Web sémantique, le Web interrelié et surtout la séparation du contenu du contenant HTML, du style CSS et de la manipulation JavaScript. Et l’usage de sélecteur permet de retirer justement tous les scripts JavaScript du document. Non seulement c’est l’idéal pour un contenu portable, pour la gestion des scripts et le débogage, mais aussi pour respecter une Politique de sécurité du contenu (CSP) stricte !

Premier exemple : hyperlien qui ouvre une fenêtre modale

La vieille méthode consistait à ajouter un « écouteur d’événements » onclick directement dans le lien, c’est à dire du code « enligne » (mauvaise traduction de « inline ») considéré comme vulnérable lorsqu’injecté dans une page Web :

// À éviter
<a href="#" onclick="mafonction(this)">Ouvrir la modale</a>

// Bonne exemple
<a data-message="Mon premier message" href="https://www.trucsweb.com" class="btn-modale" target="_blank">Ouvrir modale #1 avec lien externe</a>
<a data-message="Mon troisième message" href="https://www.trucsweb.com" class="btn-modale">Simple lien interne</a>
<a data-message="Mon quatrième message" href="https://www.trucsweb.com" class="btn-modale" target="_blank">Ouvrir modale #2 avec lien externe</a>

<script>
  // Première étape, récupérer tous les boutons avec la classe « btn-modale »
  let oElements = document.querySelectorAll(`[target="_blank"]`);
  // Deuxième étape, boucler chaque bouton
  oElements.forEach(function (oBouton) {
    // Troisième étape, lui attacher un écouteur d’évènement
    //  dans cet exemple, « click » 
    oBouton.addEventListener(`click`, function(evenement) {
      // L’exemple utilise un hyperlien <a>, il faut donc annuler le lien
      //  si on ne veut pas ouvrir l’adresse du « href »
      //  avec la méthode preventDefault() (équivalent de return false)
      evenement.preventDefault();
      // La méthode « target » permet de récupérer l’élément bouton cliqué
      // On peut récupérer un attribut par exemple data-message
      alert(evenement.target.getAttribute("data-message"));
    })
  })
</script>

Héhé, n’est pas merveilleux? Bien entendu le code est plus long, mais avec plusieurs avantages :

1. Ce code JavaScript peut être dans un fichier externe pour un site sécurisé!
2. Un seul script qui se trouve à un seul endroit au lieu de dizaines de boutons, voire davantage!
3. Donc facile à gérer sans devoir ajuster chaque hyperlien du site Web!
4. Et portable, le code peut être récupéré dans n’importe qu’elle projet sans une seule modification!
5. Particulièrement cet exemple qui utilise un sélecteur avec un attribut générique comme le « target ».

Deuxième exemple : soumettre un formulaire

C’est rare d’avoir un formulaire qui ne requiert pas de manipulation avant d’être envoyé, ne serait-ce que pour le valider ou encore un formulaire « Ajax ». La vieille méthode conventionnelle consistait à ajouter un « écouteur d’événements » onsumbit dans la balise form ou un onclick sur le bouton de type « submit » ou « button ».

// À éviter
// avec « onsubmit »
<form action="form.htm" method="post" onsubmit="return maFonction(this)">
  <label for="oNom">Votre nom</label>
  <input type="text" id="oNom">
  <button type="submit">Envoyer</button>
</form>

// Avec « onclick »
<form action="form.htm" method="post">
  <label for="oNom">Votre nom</label>
  <input type="text" id="oNom">
  <button type="submit" onclick="return maFonction(this.form)">Envoyer</button>
</form>

<script>
   function maFonction(_this) {
     alert(_this.oNom.value);
     // Annule l’envoi du formulaire
     return false;
   }
</script>

// Bonne exemple
<form id="oMonFormulaire" action="form.htm" method="post">
  <label for="oNom">Votre nom</label>
  <input type="text" id="oNom">
  <button type="submit">Envoyer</button>
</form>

<script>
const oFormulaire = document.querySelector(`#oMonFormulaire`);
oFormulaire.addEventListener(`submit`, function(e) {
  // Annule l’envoi du formulaire
  e.preventDefault();
  alert(e.target.oNom.value);
})
</script>

Voilà, si vous être amateur de JavaScript comme moi, vous ne vous passerez plus jamais des sélecteurs querySelector et querySelectorAll tout en simplifiant la gestion de vos scripts. Combiné à un createElement pour créer vos éléments HTML à la volé, votre code sera portable optimisé comme jamais!

Références

• CSS Selector Reference par W3Schools
• Native JavaScript Equivalents of jQuery Methods: the DOM and Forms par Craig Buckler
• Document.querySelector par MDN web docs
• Document.querySelectorAll() par MDN web docs
• Entête HTTP : Politique de sécurité du contenu (CSP) par Django Blais - trucsweb.com
• jQuery : Équivalent Javascript par Django Blais - trucsweb.com