Pagi itu kamu membuka file JavaScript dan melihat satu baris panjang: $("div#konten ul li.aktif a[href^='https://']"). Kode itu berjalan, tapi saat daftar item bertambah banyak, halaman mulai tersendat. Kamu mulai bertanya, apakah selector yang terlalu spesifik justru memperlambat, atau ada cara lain yang lebih tepat. Memilih selector jQuery sebenarnya soal menimbang antara kecepatan eksekusi dan kemudahan membaca kode.
Selector adalah pintu masuk pertama sebelum manipulasi DOM atau event berjalan. Salah memilih jenis selector bisa membuat kode sulit dirawat, atau terlalu umum sehingga mengenai elemen yang tidak diinginkan. Empat pendekatan yang paling sering dipakai: ID, class, atribut, dan filter.
Selector ID: cepat tapi terbatas
ID adalah pengenal unik untuk satu elemen. jQuery menerjemahkan $("#header") menjadi pencarian langsung di DOM, sehingga eksekusinya paling cepat di antara semua jenis selector. Jika kamu hanya perlu mengubah satu elemen dan ID-nya sudah ada, ini pilihan paling efisien.
Keterbatasannya muncul saat kamu perlu memilih banyak elemen sekaligus. ID tidak bisa dipakai untuk kelompok. Menambahkan ID hanya untuk keperluan JavaScript juga bisa membuat HTML penuh dengan atribut yang tidak bermakna bagi struktur dokumen. Untuk kebutuhan grup, class lebih masuk akal.
Selector class: serbaguna untuk banyak elemen
Class dirancang untuk mengelompokkan elemen. $(".tombol") akan mengambil semua elemen dengan class tersebut, dan jQuery memprosesnya dengan cepat karena mesin browser modern sudah mengoptimalkan pencarian class. Kamu bisa memakai class untuk event delegation, misalnya memasang satu listener pada wadah lalu menangani klik dari semua tombol di dalamnya.
Masalahnya, class sering dipakai untuk styling. Ketika desainer mengganti nama class untuk keperluan CSS, kode JavaScript ikut rusak. Solusinya, gunakan class khusus untuk perilaku, misalnya js-tombol-aksi, yang tidak dipakai di stylesheet. Dengan begitu, perubahan tampilan tidak mengganggu logika.
Jika kamu baru mulai dan ingin melihat bagaimana class dipakai dalam kasus nyata, ada baiknya membaca tips praktis jQuery untuk pemula yang membahas alur kerja dari HTML ke event.
Selector atribut: ketika class dan ID tidak cukup
Selector atribut memilih elemen berdasarkan nilai atau keberadaan atribut. Contohnya $("a[target='_blank']") untuk semua tautan yang membuka tab baru, atau $("input[type='checkbox']") untuk semua checkbox. Ini berguna saat kamu tidak bisa menambah class, misalnya karena HTML dihasilkan oleh sistem lain.
Dari sisi performa, selector atribut lebih lambat daripada ID atau class karena browser harus memeriksa setiap elemen yang cocok. Untuk halaman dengan ribuan baris, sebaiknya batasi pencarian pada wadah tertentu, misalnya $("#form-pendaftaran input[type='email']"). Jangan berlebihan menambahkan prefiks ID jika tidak perlu.
Selector atribut juga berguna untuk mengambil nilai dinamis, seperti $("div[data-peran='admin']"). Pastikan atribut yang dipakai memang ada di HTML dan tidak berubah-ubah tanpa kendali.
Filter: menyaring hasil seleksi
Filter bukan selector mandiri, melainkan metode untuk mempersempit hasil yang sudah ada. Contohnya $("li").filter(".aktif") atau $("li").first(). Filter berguna ketika kamu sudah memiliki kumpulan elemen dan ingin mengambil sebagian berdasarkan kondisi yang tidak bisa ditulis dalam selector CSS, misalnya indeks atau isi teks.
Filter seperti .filter() dan .not() memproses koleksi di memori, bukan mencari ulang ke DOM, sehingga biasanya lebih cepat daripada menulis selector kompleks. Rantai filter yang panjang bisa membuat kode sulit dibaca. Simpan hasil seleksi dalam variabel jika filter dipakai berulang.
Untuk operasi yang melibatkan perulangan, memilih antara each(), for, atau map() juga memengaruhi keterbacaan. Ulasan di memilih loop jQuery bisa membantu memutuskan kapan filter dikombinasikan dengan loop.
Perbandingan singkat
Tabel berikut merangkum kapan sebaiknya memakai masing-masing pendekatan.
| Jenis | Kecepatan | Cocok untuk | Hindari jika |
|---|---|---|---|
| ID | Paling cepat | Satu elemen unik | Perlu memilih banyak elemen |
| Class | Cepat | Kelompok elemen, event delegation | Class dipakai untuk styling yang sering berubah |
| Atribut | Sedang | HTML dari sistem lain, data-* | Halaman sangat besar tanpa pembatas wadah |
| Filter | Tergantung koleksi | Menyaring hasil yang sudah ada | Rantai filter terlalu panjang |
Dalam praktik, kamu akan sering menggabungkan beberapa jenis. Misalnya $("#daftar-pesanan .baris").filter(":visible"). Batasi pencarian pada wadah terdekat dan jangan menulis selector yang terlalu spesifik tanpa alasan.
Kesalahan umum dan cara menghindarinya
Salah satu kebiasaan yang sering muncul adalah menulis selector sangat panjang karena mengira semakin detail semakin cepat. Yang terjadi justru sebaliknya: mesin harus memeriksa banyak kondisi. Cukup gunakan bagian yang benar-benar membedakan elemen. Jika ada ID, mulai dari ID.
Kesalahan lain adalah memakai selector yang sama berulang kali di dalam loop. Simpan hasilnya di variabel di luar loop. Contohnya:
var $baris = $("#daftar .baris");
$baris.each(function() {
// gunakan $(this) di dalam
});Untuk event yang melibatkan banyak elemen dinamis, event delegation dengan class lebih tepat daripada memasang listener satu per satu. Cara ini juga menghindari masalah event ganda yang sering muncul saat elemen ditambahkan.
Saat menguji di browser, manfaatkan tab Elements dan Console untuk memeriksa apakah selector mengenai elemen yang tepat. Cobalah $("selector-kamu").length untuk melihat jumlah elemen yang cocok sebelum menjalankan manipulasi.
Di luar urusan kode, kadang kita perlu jeda sejenak. Jika kamu penggemar olahraga, terutama basket, sepak bola, atau UFC, menonton bareng secara gratis dengan host yang menghibur bisa jadi penyegar. Informasi jadwal dan tautan streaming bisa dilihat di tarkamlive, tetapi tetap utamakan verifikasi sumber dan kenyamanan menonton.
Ringkasan
Memilih selector jQuery yang tepat bergantung pada kebutuhan: ID untuk satu elemen, class untuk kelompok, atribut saat struktur HTML tidak bisa diubah, dan filter untuk menyaring koleksi yang sudah ada. Batasi pencarian pada wadah terdekat, simpan hasil seleksi dalam variabel, dan hindari selector yang terlalu panjang. Uji dengan .length sebelum memanipulasi DOM.
Pertanyaan yang Sering Diajukan
Apakah selector ID selalu lebih cepat daripada class?
Pada umumnya iya, karena ID hanya menunjuk satu elemen. Namun, jika kamu perlu mengubah banyak elemen, selector class lebih efisien daripada memanggil ID satu per satu.
Kapan sebaiknya memakai selector atribut?
Saat elemen tidak memiliki ID atau class yang bisa diandalkan, misalnya HTML dari plugin atau sistem lain, atau ketika kamu perlu memilih berdasarkan atribut data-* atau tipe input.
Apakah filter memperlambat eksekusi?
Filter bekerja pada koleksi yang sudah dipilih, jadi biayanya tergantung jumlah elemen. Rantai filter yang panjang bisa mengurangi keterbacaan. Simpan hasil seleksi di variabel jika filter dipakai berulang.