Trucsweb.com

Trucsweb.com

Javascript

Sans jQuery

RDFFav

Sélecteurs JavaScript querySelector() et querySelectorAll()

Gérer vos manipulations JavaScript à l’aide des sélecteurs querySelector() et querySelectorAll() plus rapide!Sélecteurs JavaScript querySelector() et querySelectorAll()

Gilles Villeneuve, gagnant du GP de Montréal en 1978. J’y était ;- )
Gilles Villeneuve, gagnant du GP de Montréal en 1978. J’y était ;- )

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="http://www.trucsweb.com" class="btn-modale" target="_blank">Ouvrir modale #1 avec lien externe</a>
<a data-message="Mon troisième message" href="http://www.trucsweb.com" class="btn-modale">Simple lien interne</a>
<a data-message="Mon quatrième message" href="http://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

Oznog
Dernière mise à jour :

Commentaires

    Ajouter un commentaire
    Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
    Votre évaluation du tutoriel

    10/10 sur 1 revues.
           Visites : 1630 - Pages vues : 1673
    X

    Trucsweb.com Connexion

    Connexion

    X

    Trucsweb.com Mot de passe perdu

    Connexion

    X

    Trucsweb.com Conditions générales

    Conditions

    Responsabilité

    La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

    Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

    Droit applicable et juridiction compétente

    Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Glossaire

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Trucsweb

    Conditions

    Aucun message!

    Merci.

    X
    Aucun message!
    X

    Trucsweb.com Créer un compte

    Créer un compte

    .
    @