Memudahkan Manipulasi DOM dengan Fungsi Utiliti JavaScript Vanila

pengenalan

Jika anda pernah bekerja dengan jQuery, anda tahu betapa mudahnya memilih dan memanipulasi elemen DOM. Tetapi bagaimana jika anda mahukan fungsi serupa dalam JavaScript vanila tanpa menarik keseluruhan perpustakaan jQuery? Dalam artikel ini, kami akan membincangkan cara mencipta fungsi utiliti yang dipermudahkan yang meniru beberapa ciri teras jQuery seperti memilih elemen dan menambah kelas, semuanya menggunakan JavaScript tulen.

Mari kita pecahkan fungsi utiliti ringkas yang membolehkan manipulasi DOM dengan cara yang bersih dan boleh dirantai. Kami akan membinanya langkah demi langkah dan menerangkan setiap bahagian.

Kod

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

Penjelasan

1. Mencipta Fungsi $:

   const $ = function (selector = null) {

Fungsi $ ialah utiliti ringkas yang meniru pemilih $ jQuery. Ia menerima pemilih sebagai hujah, yang boleh menjadi rentetan pemilih CSS, elemen DOM tunggal atau NodeList.

1. Kelas dan Pembina Tanpa Nama:

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

Fungsi ini mengembalikan contoh kelas tanpa nama. Di dalam pembina, ia menyemak jenis hujah pemilih dan memprosesnya dengan sewajarnya.

1. Mengendalikan Pemilih:

   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

• Jika pemilih ialah elemen DOM (ia mempunyai nodeType), ia dibalut dalam tatasusunan untuk pengendalian yang konsisten.
• Jika pemilih sudah menjadi NodeList, kami menggunakannya secara langsung.
• Jika ia adalah rentetan, kami menganggap ia adalah pemilih CSS dan menggunakan querySelectorAll untuk memilih elemen DOM yang sepadan.

Selepas menentukan jenis, elemen pertama yang dipilih disimpan dalam this.n untuk akses pantas.

1. Setiap Kaedah:

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

Setiap kaedah berulang ke atas elemen yang dipilih dalam this.nodes dan menggunakan fungsi panggil balik yang disediakan untuk setiap satu. Ia mengembalikan ini supaya anda boleh merantai berbilang kaedah bersama-sama.

1. Kaedah 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
       });
   }

Kaedah addClass membolehkan anda menambah satu atau lebih kelas pada elemen yang dipilih. Ia memerlukan rentetan nama kelas yang dipisahkan dengan koma, membahagikannya, memangkas sebarang ruang tambahan dan menggunakan setiap kelas pada elemen menggunakan classList.add.

Contoh Penggunaan

Dengan utiliti ini, anda kini boleh memanipulasi DOM dengan cara yang mudah dan boleh dibaca, sama seperti yang anda lakukan dengan 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');

Kesimpulan

Fungsi utiliti ini membawa sedikit keanggunan jQuery ke dalam dunia JavaScript vanila, menjadikan manipulasi DOM lebih intuitif dan boleh dibaca tanpa bergantung pada perpustakaan luaran. Ia juga ringan dan boleh dilanjutkan dengan mudah dengan lebih banyak kaedah mengikut keperluan. Walaupun ia tidak sekuat atau menyeluruh seperti jQuery, ia merangkumi banyak tugas harian dengan cara yang bersih dan boleh digunakan semula.

Jangan ragu untuk mengembangkan utiliti ini dengan lebih banyak kaedah seperti removeClass, toggleClass atau css. Dengan cara ini, anda akan mempunyai rangka kerja mini anda sendiri yang disesuaikan dengan keperluan khusus anda.

Jika anda mendapati ini membantu atau mempunyai cadangan untuk penambahbaikan, tinggalkan ulasan di bawah. Mari kita permudahkan proses manipulasi DOM bersama-sama!

Atas ialah kandungan terperinci Memudahkan Manipulasi DOM dengan Fungsi Utiliti JavaScript Vanila. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!