Mengganti Jquery dengan Vanila Js

Artikel ini di latar belakangi oleh sebagai catatan pribadi saja, berkali kali saya mencoba untuk mengganti jquery dengan vanilla.

Tapi saya tidak pernah bisa lepas dengan jQuery dikarenakan oleh script dari jquery itu sendiri yang simpel dan sudah terbiasa memakai jquery selama bertahun tahun. seperti enaknya memakai DOM Manipulation nya menyeleksi sebuah elemen dan hal-hal lainnya yang membuat saya begitu ketergantungan menggunakannya.

Tapi sekarang saya coba untuk memaksa diri saya untuk tidak menggunakannya lagi karena masalah performa, karena di dalam jquery yang kita buat yang cukup simpel itu ternyata dia menginclude begitu banyak function.

Untuk di FE sendiri tidak direkomendasikan memakai jquery.

Memilih Elemen

Memilih satu atau beberapa elemen DOM untuk melakukan sesuatu adalah salah satu elemen paling dasar dari jQuery. Setara dengan $ () atau jQuery () dalam JavaScript adalah querySelector () atau querySelectorAll (), yang, seperti halnya dengan jQuery, Anda dapat memanggil dengan pemilih CSS.

// jQuery, memilih semua element dengan classname .box
$(".box");
// memilih element pertama pada class box
document.querySelector(".box");
// atau bisa memilih semua element dengan classname .box  
document.querySelectorAll(".box");

Pola jQuery yang umum adalah memilih elemen dalam elemen lain menggunakan .find(). ini adalah salah satu fitur dari jquery yang saya sukai untuk menggantinya kita bisa menggunakan dengan memanggil querySelector atau querySelectorAll pada elemen:

// memilih classname .box di dalam elemen container
var container = $(".container");
container.find(".box");

// Vanilla Js
var container = document.querySelector(".container");
container.querySelector(".box");