如果您曾經使用過 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
確定類型後，將第一個選定的元素儲存在 this.n 中，以便快速存取。
each(callback) {
this.nodes.forEach(node => callback(node));
return this; // Allows method chaining
}
each 方法迭代 this.nodes 中選定的元素，並將提供的回呼函數應用於每個元素。它會傳回此值，以便您可以將多個方法連結在一起。
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中文網其他相關文章！
