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
-
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
.
- 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.
- 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 hasnodeType
), it's wrapped in an array for consistent handling. - If
selector
is already aNodeList
, 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.
-
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.
-
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!
Top comments (0)