使用 Vanilla JavaScript 實用函數簡化 DOM 操作

介紹

如果您曾經使用過 jQuery，您就會知道它對於選擇和操作 DOM 元素有多麼方便。但是，如果您希望在普通 JavaScript 中實現類似的功能，而不需要引入整個 jQuery 庫，該怎麼辦？在本文中，我們將介紹如何建立一個簡化的實用函數，該函數模仿 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），則將其包裝在陣列中以實現一致處理。
• 如果selector已經是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 方法可讓您為所選元素新增一個或多個類別。它採用以逗號分隔的類別名稱字串，將它們分開，修剪任何多餘的空格，並使用 classList.add 將每個類別套用到元素。

使用範例

使用此實用程序，您現在可以以簡單、可讀的方式操作 DOM，類似於使用 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');

結論

這個實用函數將 jQuery 的優雅帶入了原生 JavaScript 的世界，使 DOM 操作更加直覺和可讀，而無需依賴外部程式庫。它也是輕量級的，可以根據需要使用更多方法輕鬆擴展。雖然它不像 jQuery 那樣強大或全面，但它以乾淨、可重複使用的方式涵蓋了許多日常任務。

請隨意使用更多方法（例如removeClass、toggleClass，甚至css）來擴充此實用程式。這樣，您將擁有根據您的特定需求量身定制的迷你框架。

---

如果您發現這有幫助或有改進建議，請在下面發表評論。讓我們一起簡化 DOM 操作流程！

以上是使用 Vanilla JavaScript 實用函數簡化 DOM 操作的詳細內容。更多資訊請關注PHP中文網其他相關文章！