Le spread operator pour convertir les NodeList en Array avec JavaScript ES6

Dans cet article, nous explorererons l'univers du développement web avec une astuce puissante et efficace : l'utilisation du spread operator pour convertir les NodeList en Array avec JavaScript ES6. Si vous avez déjà utilisé document.querySelectorAll pour récupérer des éléments du DOM, vous avez probablement été confronté aux limitations de manipulations des NodeList. Ne vous inquiétez pas, nous sommes là pour vous montrer comment le spread operator peut simplifier considérablement le traitement de ces collections de nœuds, ouvrant la porte à une manipulation fluide et puissante de vos éléments sélectionnés.

Qu'est-ce qu'un NodeList ?

Un NodeList est une collection d'éléments du DOM (Document Object Model), littéralement "collections de nœuds". Il s'agit d'objets très similaires aux tableaux mais ne possèdent pas toutes leurs propriétés et méthodes. Le NodeList est généralement obtenu suite à l'utilisation d'une méthode de sélection telles que querySelectorAll(), qui retourne tous les éléments correspondant à un certain selecteur CSS.

Les limites des NodeList

Malgré leur apparence similaire aux tableaux, les NodeList sont plus limités dans leurs capacités. Par exemple, ils ne disposent pas des méthodes map(), filter() ou reduce() disponibles sur les Arrays. Cela signifie qu'il est indispensable de convertir un NodeList en Array avant de pouvoir appliquer ce type de fonctions pour manipuler vos données. De même, si vous souhaitez trier la liste de nœuds, vous n'aurez pas accès à des méthodes comme reverse(), qui ne fonctionne que sur des tableaux.

JavaScript ES6 et le Spread Operator

Avec l'introduction du standard JavaScript ES6, plusieurs nouvelles fonctionnalités ont été ajoutées pour simplifier la manipulation des objets tels que les tableaux et les NodeList. Parmi ces nouveautés se trouve le spread operator, un opérateur facilitant grandement la conversion d'un NodeList en Array.

Comment fonctionne le Spread Operator ?

Le spread operator permet de décomposer un itérable (comme un tableau ou un NodeList) en une liste d'éléments. Cette fonctionnalité peut s'avérer très utile dans diverses situations, notamment lorsqu'on souhaite combiner plusieurs tableaux entre eux ou créer rapidement des copies de tableaux existants.

Convertir les NodeList en Array grâce au Spread Operator

Voici la procédure étape par étape pour convertir un NodeList en Array à l'aide du spread operator :

1. Commencez par récupérer tous les éléments que vous souhaitez manipuler avec document.querySelectorAll(). Cela retournera un NodeList contenant les éléments trouvés.
2. Créez un nouveau tableau en utilisant le spread operator et le NodeList obtenu. Pour cela, il suffit d'écrire trois petits points (...) devant le NodeList à convertir entre crochet tel que [...nodeList];.
3. Vous disposez maintenant d'un tableau contenant chaque élément de façon individuelle et pouvez donc appliquer toutes les méthodes disponibles sur les Arrays.

Exemple de code

// Récupération de tous les éléments ayant la classe "exemple" dans un NodeList
const nodeListName = document.querySelectorAll('.exemple');

// Conversion du NodeList en Array grâce au spread operator
const array = [...nodeListName];

// Affichage du résultat dans la console pour vérification
console.log(array);

Cet exemple illustre comment récupérer les éléments ayant la classe "exemple" à l'aide de document.querySelectorAll(), puis convertir le NodeList en Array à l'aide du spread operator. Vous pouvez ainsi manipuler l'Array obtenu avec toutes les méthodes habituelles disponibles pour ce type d'objet.

Pourquoi utiliser le Spread Operator ?

Le principal avantage du spread operator est sa simplicité et sa rapidité d'exécution, rendant la conversion des NodeList en Arrays particulièrement aisée. De plus, cette méthode fonctionne avec n'importe quel itérable (comme un objet Set ou une chaîne de caractères), offrant ainsi une flexibilité importante lors de la manipulation de ce genre d'objets dans votre code.

Autres alternatives pour convertir les NodeList en Array

Il existe également d'autres méthodes permettant de réaliser la conversion des NodeList en Array :

• Array.from() : Cette méthode crée un nouvel Array à partir d'un objet semblable à un tableau ou itérable. Vous pouvez donc l'utiliser pour convertir rapidement un NodeList en Array.
• forEach() et push() : Une autre solution consiste à créer un nouveau tableau vide, puis parcourir le NodeList à l'aide de la méthode forEach() et ajouter chaque élément individuellement au tableau à l'aide de la méthode push(). Cette alternative peut être utile si vous disposez d'une version antérieure de JavaScript et que le spread operator n'est pas disponible.
• Vous trouverez plus d'informations sur ces méthodes sur le site de Mozilla.

Cependant, le spread operator reste la manière la plus simple et la plus efficace de convertir les NodeList en Array avec les technologies actuelles de JavaScript.

Le spread operator fournit donc une méthode simple et rapide pour convertir les NodeList en Array avec JavaScript ES6. Grâce à cette technique, vous pouvez facilement manipuler les éléments issus des sélections réalisées par document.querySelectorAll() et profiter de toutes les fonctionnalités offertes par les tableaux dans votre code. Alors n'hésitez plus et adoptez le spread operator dès aujourd'hui !

Image par Tom de Pixabay