Cara Menggunakan jQuery Menemukan Elemen HTML yang Disembunyikan

Pada saat ini perkembangan FrontEnd menjadi sangat menarik. Terlebih lagi dengan kemampuan JavaScript untuk membantu menyembunyikan elemen HTML ataupun mengelola elemen baru, sehingga developer dapat membuat aplikasi yang interaktif tanpa harus banyak berpindah halaman.

Dulu programmer menggunakan metode dengan banyak halaman untuk menampilkan suatu layanan tertentu misalnya halaman utama, halaman informasi, halaman formulir registrasi, halaman login dan lain sebagainya. Masing-masing halaman benar-benar didesain dan dibuat terpisah dalam file masing-masing, sehingga pengguna dapat memanfaatkan layanan dengan cara berpindah melalui link.

Dengan semakin banyak halaman dengan banyak elemen maka tentunya juga memerlukan tambahan waktu untuk mendesain ataupun menulis kode untuk masing-masing halaman dalam file. Semakin besar file juga akan berakibat negatif karena mempengaruhi lama waktu loading, sehingga dapat menurunkan antusias pengguna.

Tehnik Virtual DOM

Semakin kesini, banyak perubahan terjadi dimana suatu layanan tidak perlu banyak memerlukan file berukuran besar untuk diload. Semua elemen bisa dibuat dengan mode virtual DOM (Document Object Model) atau akan dibuat hanya saat diperlukan saja. Seperti konsep elemen yang digunakan react, ataupun juga konsep elemen template seperti pada vue.

Cara baru dalam membuat elemen HTML ini membuat waktu render halaman menjadi sangat hemat, sehingga mencapai kondisi ideal untuk dijadikan aplikasi mobile maupun desktop.

Manfaat Elemen Yang Disembunyikan

Sedikit berbeda dengan tehnik diatas dimana DOM baru akan dibentuk dan diload ketika dibutuhkan, kita juga dapat melakukan tehnik sederhana dengan menyembunyikan dan menampilkan elemen dari yang sudah ada.

Mungkin bagi yang belum mencoba fitur framework seperti diatas, akan lebih nyaman dengan metode menggunakan library seperti misalnya jQuery. Berbeda dengan cara yang digunakan framework, pada jQuery cara menghemat adalah dengan menyembunyikan elemen yang tidak dibutuhkan dan menampilkan yang dibutuhkan saja.

Menemukan Elemen yang Disembunyikan

Dengan membuat tampilan element saat diperlukan saja, maka sering menimbulkan pertanyaan bagaimana cara mendeteksi elemen yang sedang disembunyikan? Atau dalam kondisi saat terpengaruh fungsi disembunyikan sesaat seperti dalam toggle misalnya.

Misalnya saat elemen sedang terpengaruh fungsi .hide(), .toggle(), atau bahkan .show()?

Pada dasarnya jQuery bekerja dengan memanipulasi DOM di properties CSS dimana akan merubah kondisi sesuai dengan kebutuhan. Untuk mendeteksi kondisi elemen sedang disembunyikan atau tidak maka juga dapat menggunakan fungsi jQuery seperti berikut:

// untuk mendeteksi apakah elemen sedang tampil

$(element).is(":visible");

atau bisa juga dengan 

// untuk mendeteksi apakah elemen sedang disembunyikan

$(element).is(":hidden");