Selecteurs

3

L'API Selectors permet d'accéder aux différents éléments d'une page HTML.

querySelector vs querySelectorAll

Ces méthodes permettent d'effectuer des requêtes afin d'accéder à un ou plusieurs éléments du DOM. Ces requêtes utilisent les mêmes sélecteurs que ceux utilisés en CSS.

querySelector

Retourne le premier élément correspondant au sélecteur ou encore null si aucun élément n'a pu être trouvé.

document.querySelector('.exemple');

Décortiquons l'exemple précédent:

  • document indique où effectuer la recherche (dans ce cas, dans l'ensemble du document).
  • querySelector() type de requête indiquant qu'un seul élément devra être retourné.
  • .exemple sélecteur indiquant que l'élément recherché possède la classe exemple.

Pour en savoir plus, voir cet article sur MDN🦖 à propos de querySelector().

querySelectorAll

Retourne tous les éléments correspondant au sélecteur, dans l'ordre qu'ils apparaissent, sous forme de NodeList (similaire à un tableau).

const exemplesList = document.querySelectorAll('.exemple');

Dans cet exemple, nous avons une variable const exemplesList contenant le résultat de la requête. Examinons ce qui constitue cette requête.

  • document indique où effectuer la recherche (dans ce cas, dans l'ensemble du document).
  • querySelectorAll() type de requête indiquant qu'un tableau d'éléments devra être retourné.
  • .exemple sélecteur indiquant que l'élément recherché possède la classe exemple.

Si aucun élément n'est trouvé, un NodeList vide sera retourné.

Pour accéder aux différents éléments retournés, nous utiliserons ensuite une boucle. Par exemple, une boucle forEach:

exemplesList.forEach(element => {
  console.log(element);
});

Erreur courante ❌

Un élément est présent dans la page, mais querySelector() retourne null. Cette erreur se produit généralement lorsque le navigateur tente d'accéder à un élément avant même de savoir que l'élément existe.

Puisque le navigateur exécute le code de haut en bas ⬇️, si une balise <script> se trouve dans le <head> et qu'elle contient une référence à un élément se trouvant dans le <body>, le navigateur cherchera parmi le code qu'il a déjà exécuté, soit le <head>, et ne trouvera pas l'élément demandé, puisqu'il n'a pas encore pris conscience du <body> et de son contenu.

Par contre, si la balise <script> est déplacée juste avant la fermeture du </body>, le navigateur pourra alors chercher à l'intérieur de celui-ci et donc, sera en mesure de trouver l'élément demandé.

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme