Vanilla JavaScript ユーティリティ関数を使用した DOM 操作の簡素化

導入

jQuery を使用したことがある方は、DOM 要素の選択と操作に jQuery がいかに便利であるかをご存知でしょう。しかし、jQuery ライブラリ全体を取り込まずに、バニラ JavaScript で同様の機能が必要な場合はどうすればよいでしょうか?この記事では、要素の選択やクラスの追加など、jQuery のコア機能の一部を模倣する簡素化されたユーティリティ関数を、すべて純粋な JavaScript を使用して作成する方法を説明します。

クリーンでチェーン可能な方法で DOM 操作を可能にする簡潔なユーティリティ関数を分解してみましょう。段階的に構築し、各部分について説明します。

コード

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);
}

説明

1. $ 関数の作成:

   const $ = function (selector = null) {

$ 関数は、jQuery の $ セレクターを模倣した簡素化されたユーティリティです。セレクターを引数として受け取ります。これは、CSS セレクター文字列、単一の DOM 要素、または NodeList のいずれかになります。

1. 匿名クラスとコンストラクター:

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

この関数は、匿名クラスのインスタンスを返します。コンストラクター内で、セレクターの引数の型を確認し、それに応じて処理します。

1. セレクターの処理:

   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

• セレクターが DOM 要素 (nodeType を持つ) の場合、一貫した処理のために配列にラップされます。
• セレクターがすでに NodeList である場合は、それを直接使用します。
• 文字列の場合は、CSS セレクターであると想定し、querySelectorAll を使用して一致する DOM 要素を選択します。

タイプを決定した後、最初に選択した要素は、すぐにアクセスできるように this.n に保存されます。

1. 各メソッド:

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

each メソッドは、this.nodes 内の選択された要素を反復処理し、提供されたコールバック関数を各要素に適用します。これを返すことで、複数のメソッドを連結できるようになります。

1. 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
       });
   }

addClass メソッドを使用すると、選択した要素に 1 つ以上のクラスを追加できます。これは、カンマで区切られたクラス名の文字列を取得し、それらを分割し、余分なスペースを削除し、classList.add.

を使用して各クラスを要素に適用します。

使用例

このユーティリティを使用すると、jQuery の場合と同様に、シンプルで読みやすい方法で DOM を操作できるようになります。

// 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');

結論

このユーティリティ関数は、バニラ JavaScript の世界に jQuery の優雅さをもたらし、外部ライブラリに依存せずに DOM 操作をより直感的で読みやすくします。また軽量なので、必要に応じてメソッドを追加して簡単に拡張できます。 jQuery ほど強力でも包括的でもありませんが、クリーンで再利用可能な方法で日常のタスクの多くをカバーします。

removeClass、toggleClass、さらには css などのメソッドを追加して、このユーティリティを自由に拡張してください。このようにして、特定のニーズに合わせた独自のミニフレームワークを作成できます。

---

これが役に立ったと感じた場合、または改善のための提案がある場合は、以下にコメントを残してください。一緒に DOM 操作プロセスを簡素化しましょう!

以上がVanilla JavaScript ユーティリティ関数を使用した DOM 操作の簡素化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。