Simplifying DOM Manipulation with a Vanilla JavaScript Utility Function

Introduction

If you've ever worked with jQuery, you know how convenient it is for selecting and manipulating DOM elements. But what if you want similar functionality in vanilla JavaScript without pulling in the entire jQuery library? In this article, we'll walk through how to create a simplified utility function that mimics some of jQuery’s core features like selecting elements and adding classes, all using pure JavaScript.

Let's break down a concise utility function that enables DOM manipulation in a clean, chainable manner. We'll build it step by step and explain each part.

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

Explanation

1. Creating the $ Function:

   const $ = function (selector = null) {

The $ function is a simplified utility that mimics jQuery’s $ selector. It accepts a selector as an argument, which can be a CSS selector string, a single DOM element, or a NodeList.

1. Anonymous Class and Constructor:

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

This function returns an instance of an anonymous class. Inside the constructor, it checks what type of argument the selector is and processes it accordingly.

1. Handling the 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

• If selector is a DOM element (it has nodeType), it's wrapped in an array for consistent handling.
• If selector is already a NodeList, we use it directly.
• If it's a string, we assume it's a CSS selector and use querySelectorAll to select the matching DOM elements.

After determining the type, the first selected element is stored in this.n for quick access.

1. The each Method:

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

The each method iterates over the selected elements in this.nodes and applies the provided callback function to each one. It returns this so that you can chain multiple methods together.

1. The addClass Method:

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

The addClass method lets you add one or more classes to the selected elements. It takes a string of class names separated by commas, splits them, trims any extra spaces, and applies each class to the elements using classList.add.

Usage Example

With this utility, you can now manipulate the DOM in a simple, readable way, similar to how you would with 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

This utility function brings a bit of jQuery’s elegance into the world of vanilla JavaScript, making DOM manipulation more intuitive and readable without relying on external libraries. It’s also lightweight and can be easily extended with more methods as needed. While it's not as powerful or comprehensive as jQuery, it covers many everyday tasks in a clean, reusable way.

Feel free to expand this utility with more methods like removeClass, toggleClass, or even css. This way, you’ll have your own mini-framework tailored to your specific needs.

---

If you found this helpful or have suggestions for improvements, leave a comment below. Let's simplify the DOM manipulation process together!

The above is the detailed content of Simplifying DOM Manipulation with a Vanilla JavaScript Utility Function. For more information, please follow other related articles on the PHP Chinese website!