Comment éviter la frustration en choisissant le bon sélecteur JavaScript

Un guide rapide sur la façon dont les sélecteurs affectent votre code

“Un beau coucher de soleil dans un ciel nuageux, projeté au-dessus d'un océan calme.” Par Sebastien Gabriel sur Unsplash

En travaillant sur un projet, j'ai rencontré un problème dans mon code. J'essayais de définir plusieurs éléments HTML dans une collection, puis de les modifier en fonction de certaines conditions prédéfinies. Je me suis débattu pendant environ quatre heures de temps de codage (sur deux jours) pour déboguer mon code et essayer de comprendre pourquoi je ne obtenais pas le résultat souhaité.

Il se trouve que j'avais utilisé document.querySelectorAll () pour assigner mes éléments à une variable, puis je tentais de modifier ces éléments. Le seul problème est que ce sélecteur JavaScript en particulier renvoie une liste de nœuds statiques. Comme ce n’est pas une représentation en direct des éléments, je n’ai pas pu les modifier plus tard dans mon code.

Hypothèses

Dans cet article, je suppose que certaines choses sont vraies:

  • Vous travaillez en JavaScript "simple ou vanillé" (pas de framework ni de bibliothèque)
  • Vous avez une compréhension de base des éléments / sélecteurs JavaScript
  • Vous avez une compréhension de base du DOM

Le Nitty-Gritty

Au cas où j'aurais trop assumé mes responsabilités, j'ai fourni des liens vers des documents pertinents dans l'article qui, je l'espère, vous seront utiles.

JavaScript est un écosystème si vaste et si riche qu’il n’est pas surprenant qu’il existe de nombreuses façons d’accomplir la même tâche. Selon votre tâche, la façon dont cela est accompli est importante dans une certaine mesure.

Vous pouvez creuser un trou avec vos mains, mais c’est beaucoup plus facile et plus efficace de le faire avec une pelle.

À cette fin, j’espère vous remettre une pelle après avoir lu cet article.

«Une longue photo d'un groupe de personnes sur une plage avec des enfants creusant un trou profond» par Khürt Williams dans Unsplash

Choisir le bon outil pour le travail

J'ai eu la question "Quel sélecteur d'élément devrais-je utiliser?" À plusieurs reprises. Jusqu’à présent, je n’avais pas trop envie et n’avais pas besoin d’apprendre la différence tant que mon code produisait le résultat souhaité. Après tout, quelle est la couleur du taxi, dans la mesure où il vous permet de vous rendre à destination en toute sécurité et en temps voulu… n'est-ce pas?

Commençons par quelques-unes des façons de sélectionner des éléments DOM en JavaScript. Je crois qu’il existe plus de moyens de sélectionner des éléments, mais ceux énumérés ici sont de loin les plus répandus que j’ai rencontrés.

document.getElementById ()

Ceux-ci ne renverront jamais qu’un (1) élément car, de par leur nature, les identifiants sont uniques et qu’il ne peut y en avoir qu’un (de même nom) sur la page à la fois.

Il retourne un objet qui correspond à la chaîne qui lui a été transmise. Il renvoie null si aucun identifiant correspondant n'est trouvé dans votre code HTML.

Exemple de syntaxe -> document.getElementById ('main_content')

Contrairement à certains sélecteurs auxquels nous reviendrons plus loin dans l’article, il n’est pas nécessaire d’indiquer un # pour indiquer l’identificateur d’élément.

document.getElementsByTagName ()

Notez le «S» dans les éléments - ce sélecteur renvoie des multiples dans une structure de type tableau appelée collection HTML - tout le document est recherché, y compris le nœud racine (l'objet document) pour un nom correspondant. Ce sélecteur d'élément commence en haut du document et continue vers le bas, en recherchant les balises correspondant à la chaîne transmise.

Si vous souhaitez utiliser des méthodes de tableau natif, vous n’avez pas de chance. Autrement dit, sauf si vous convertissez les résultats renvoyés dans un tableau pour les parcourir, ou utilisez l'opérateur étendu ES6, qui sortent tous deux du cadre de cet article. Mais je voulais que vous sachiez qu'il est possible d'utiliser des méthodes de tableau si vous le souhaitez.

Exemple de syntaxe -> document.getElementsByTagName («liens_en-tête»). Ce sélecteur accepte également p, div, body ou toute autre balise HTML valide.

document.getElementsByClassName ()

Sélecteur de nom de classe - remarquez à nouveau le «S» dans les éléments - ce sélecteur renvoie des multiples dans une structure de type tableau appelée collection HTML de noms de classe. Il correspond à la chaîne transmise (peut prendre plusieurs noms de classe, même s'ils sont séparés par un espace), recherche dans tout le document, peut être appelé sur n'importe quel élément et ne renvoie que les descendants de la classe transmise.

Aussi non . (point) est nécessaire pour indiquer le nom de la classe

Exemple de syntaxe -> document.getElementsByClassName (‘className’)

document.querySelector ()

Ce sélecteur ne renvoie qu'un (1) élément.

Seul le premier élément correspondant à la chaîne transmise sera renvoyé. Si aucune correspondance pour la chaîne fournie n'est trouvée, null est renvoyé.

Exemple de syntaxe -> document.querySelector (‘# side_note’) ou document.querySelector (‘. Header_links ')

Contrairement à tous nos exemples précédents, ce sélecteur nécessite a. (point) pour indiquer la classe ou un # (octothorp) pour indiquer un identifiant et fonctionne avec tous les sélecteurs CSS.

document.querySelectorAll ()

Ce sélecteur renvoie des multiples qui correspondent à la chaîne transmise et les organise dans un autre tableau, appelé structure de liste de nœuds.

Comme avec certains des exemples précédents, la liste de nœuds ne peut pas utiliser de méthodes de tableau natif telles que .forEach (). Donc, si vous voulez utiliser ceux-ci, vous devez d'abord convertir la liste de noeuds en tableau. Si vous ne souhaitez pas convertir, vous pouvez toujours parcourir la liste des nœuds avec une instruction for… in.

La chaîne passée doit correspondre à un sélecteur CSS valide: id, noms de classe, types, attributs, valeurs d’attributs, etc.

Exemple de syntaxe -> document.querySelectorAll ('. Footer_links')

Emballer

En choisissant le bon sélecteur en fonction de vos besoins en matière de codage, vous éviterez de nombreux pièges dans lesquels je suis tombé. Cela peut être incroyablement frustrant lorsque votre code ne fonctionne pas, mais en vous assurant que votre sélecteur correspond à vos besoins, vous n'aurez aucun mal à «creuser avec votre pelle» :)

Merci d'avoir lu ce post. Si cela vous a plu, pensez à faire un don pour aider les autres à le trouver également. Je publie (gère activement mon emploi du temps pour écrire plus) contenu lié sur mon blog. Je suis également actif sur Twitter et je suis toujours heureux de pouvoir communiquer avec d’autres développeurs!