使用 Vanilla JavaScript 實用函數簡化 DOM 操作-js教程-PHP中文網

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

WBOY

發布： 2024-09-06 21:00:40

原創

1051 人瀏覽過

Simplifying DOM Manipulation with a Vanilla JavaScript Utility Function

介紹

如果您曾經使用過 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);
}

登入後複製

解釋

建立 $ 函數：

   const $ = function (selector = null) {

登入後複製

$ 函數是模仿 jQuery 的 $ 選擇器的簡化實用程式。它接受一個選擇器作為參數，該參數可以是 CSS 選擇器字串、單一 DOM 元素或 NodeList。

匿名類別與建構子：

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

登入後複製

此函數傳回匿名類別的實例。在建構函式內部，它檢查選擇器的參數類型並進行對應處理。

處理選擇器：

   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 中，以便快速存取。

每個方法：

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

登入後複製

each 方法迭代 this.nodes 中選定的元素，並將提供的回呼函數應用於每個元素。它會傳回此值，以便您可以將多個方法連結在一起。

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

登入後複製