JavaScript and Document Object Model

Document Object Model

Document Object Model adalah antarmuka pemrograman aplikasi (API) untuk memanipulasi dokumen HTML. DOM mewakili dokumen HTML sebagai tree of nodes. DOM menyediakan fungsi yang memungkinkan kita untuk menambah,menghapus, dan memodifikasi bagian dokumen secara efektif.

Berikutnya kita akan membuat mini project menggunakan JavaScript aplikasi pencarian menggunakan Wikipedia :

Yang pertama kita akan membuat struktur folder.

Pertama, buat folder baru bernama wikipedia-search yang akan menyimpan file proyek.

Kedua, buat 3 folder di dalam folder wikipedia-search yang bernama js yang berisi file app.js, folder css yang berisi file style.css, dan folder img yang berisi file gambar. Struktur folder dapat dilihat pada gambar berikut :

Kemudian kita akan membuat halaman index.html

Berikut source code index.html :

Kemudian kita akan membuat halaman style.css untuk mempercantik halaman. Berikut ini adalah source code dari style.css di dalam folder css :

Selanjutnya kita akses index.html pada browser, maka akan terlihat tampilan sebagai berikut :

Selanjutnya kita fokus pada file app.js di dalam folder js

Pertama, pilih tag <input> dan cari elemen hasil menggunakan querySelector() dengan metode sebagai berikut :

Kedua, atur fokus pada <input> elemen dengan memanggil method focus() :

Ketiga, lampirkan event listener input untuk elemen <input> :

Jika kita mengetik beberapa teks di kolom pencarian, maka kita akan melihat teks berikut pada console :

Mengambil Hasil Pencarian menggunakan Wikipedia API

Berikut ini adalah script membuat function search(), dan membuat method GET permintaan HTTP ke Wikipedia dan menampilkan hasil pencarian ke Consele :

Berikut adalah script lengkap dari file app.js :

Sekarang, jika kita membuka file index.html dan mengetik pencarian atau kata kunci di kolom pencarian maka kita akan melihat hasil sebagai berikut pada console :

Output tersebut menunjukkan bahwa function search() dijalankan untuk setiap karakter yang kita ketik. Itu memanggil API untuk setiap input teks, yang tidak efisien.

Untuk membatasi permintaan, kita akan mengirim permintaan API hanya jika diperlukan. Dengan kata lain, kita akan mengirim permintaan API hanya setelah menjeda atau berhenti mengetik untuk jangka waktu tertentu, misalnya setengah detik.

Untuk membuatnya, kita dapat menggunakan setTimeOut() untuk menjadwalkan pencarian dalam waktu tertentu dan clearTimeOut() function yang jika pengguna menjeda atau berhenti mengetik, maka biarkan timer menjalankan fungsi terjadwal untuk mencari.

Berikut ini adalah script dari function search() :