Simplifier la manipulation du DOM avec une fonction utilitaire JavaScript Vanilla

Introduction

Si vous avez déjà travaillé avec jQuery, vous savez à quel point il est pratique pour sélectionner et manipuler des éléments DOM. Mais que se passe-t-il si vous souhaitez des fonctionnalités similaires dans JavaScript Vanilla sans accéder à l'intégralité de la bibliothèque jQuery ? Dans cet article, nous expliquerons comment créer une fonction utilitaire simplifiée qui imite certaines des fonctionnalités principales de jQuery telles que la sélection d'éléments et l'ajout de classes, le tout en utilisant du JavaScript pur.

Décomposons une fonction utilitaire concise qui permet la manipulation du DOM de manière propre et chaînable. Nous allons le construire étape par étape et expliquer chaque partie.

Le code

const $ = function (selector = null) {
    return new class {
        constructor(selector) {
            if (selector) {
                // Check if selector is a single DOM element (nodeType present)
                if (selector.nodeType) {
                    this.nodes = [selector];  // Convert the element into an array
                } 
                // Check if selector is a NodeList
                else if (NodeList.prototype.isPrototypeOf(selector)) {
                    this.nodes = selector;  // Use the NodeList as-is
                } 
                // Otherwise assume it's a CSS selector string
                else {
                    this.nodes = document.querySelectorAll(selector);
                }
                // Store the first element in the variable 'n'
                this.n = this.nodes[0];
            }
        }

        each(callback) {
            this.nodes.forEach(node => callback(node));
            return this;  // Return 'this' for method chaining
        }

        addClass(classNames) {
            return this.each(node => {
                const classes = classNames.split(",").map(className => className.trim());  // Split and trim classes
                node.classList.add(...classes);  // Add the classes to the element
            });
        }
    }(selector);
}

Explication

1. Création de la fonction $ :

   const $ = function (selector = null) {

La fonction $ est un utilitaire simplifié qui imite le sélecteur $ de jQuery. Il accepte un sélecteur comme argument, qui peut être une chaîne de sélection CSS, un seul élément DOM ou une NodeList.

1. Classe anonyme et constructeur :

   return new class {
       constructor(selector) {
           if (selector) {

Cette fonction renvoie une instance d'une classe anonyme. À l'intérieur du constructeur, il vérifie le type d'argument du sélecteur et le traite en conséquence.

1. Gestion du sélecteur :

   if (selector.nodeType) {
       this.nodes = [selector];  // Convert the element into an array
   } else if (NodeList.prototype.isPrototypeOf(selector)) {
       this.nodes = selector;  // Use the NodeList as-is
   } else {
       this.nodes = document.querySelectorAll(selector);  // Handle CSS selector strings
   }
   this.n = this.nodes[0];  // Store the first element

• Si le sélecteur est un élément DOM (il a nodeType), il est enveloppé dans un tableau pour une gestion cohérente.
• Si le sélecteur est déjà une NodeList, nous l'utilisons directement.
• S'il s'agit d'une chaîne, nous supposons qu'il s'agit d'un sélecteur CSS et utilisons querySelectorAll pour sélectionner les éléments DOM correspondants.

Après avoir déterminé le type, le premier élément sélectionné est stocké dans this.n pour un accès rapide.

1. La méthode chaque :

   each(callback) {
       this.nodes.forEach(node => callback(node));
       return this;  // Allows method chaining
   }

La méthode each parcourt les éléments sélectionnés dans this.nodes et applique la fonction de rappel fournie à chacun d'eux. Il renvoie ceci afin que vous puissiez enchaîner plusieurs méthodes ensemble.

1. La méthode addClass :

   addClass(classNames) {
       return this.each(node => {
           const classes = classNames.split(",").map(className => className.trim());  // Split and trim class names
           node.classList.add(...classes);  // Add the classes to each element
       });
   }

La méthode addClass permet d'ajouter une ou plusieurs classes aux éléments sélectionnés. Il prend une chaîne de noms de classes séparés par des virgules, les divise, supprime les espaces supplémentaires et applique chaque classe aux éléments à l'aide de classList.add.

Exemple d'utilisation

Avec cet utilitaire, vous pouvez désormais manipuler le DOM d'une manière simple et lisible, comme vous le feriez avec jQuery :

// Select all elements with the class 'my-element' and add 'new-class' to them
$('.my-element').addClass('new-class');

// You can also chain methods, for example, adding multiple classes
$('.my-element').addClass('class-one, class-two');

Conclusion

Cette fonction utilitaire apporte un peu de l'élégance de jQuery dans le monde du JavaScript Vanilla, rendant la manipulation du DOM plus intuitive et lisible sans recourir à des bibliothèques externes. Il est également léger et peut être facilement étendu avec davantage de méthodes selon les besoins. Bien qu'il ne soit pas aussi puissant ou complet que jQuery, il couvre de nombreuses tâches quotidiennes de manière propre et réutilisable.

N'hésitez pas à étendre cet utilitaire avec plus de méthodes comme removeClass, toggleClass ou même css. De cette façon, vous disposerez de votre propre mini-framework adapté à vos besoins spécifiques.

Si vous avez trouvé cela utile ou si vous avez des suggestions d'améliorations, laissez un commentaire ci-dessous. Simplifions ensemble le processus de manipulation du DOM !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!