Kita akan melanjutkan materi pelajaran kita ke DOM Travesal. Dengan menguasai materi ini, maka kita akan bisa menelusuri elemen lain melalui elemen yang telah kita pilih. Namun sebelumnya kita mesti mengerti dahulu mengenai DOM Tree. Untuk itu, kita ulangi sebentar materi pertama dari DOM ya.

Kita telah belajar, bahwa halaman HTML kita akan diubah menjadi sebuah diagram yang berbentuk tree. Diagram ini bagaikan sebuah silsilah keluarga, dimana element yang berada di bagian atas menjadi parent atau orang tua. Element yang berada sejajar dengan orang tua yang sama, menjadi sibling atau saudara kandung. Sedangkan element yang berada di bawah menjadi child atau anak. Bagian paling atas dari DOM adalah object khusus yang namanya document.

Kalau misalkan kita sedang berada di element OL, maka yang menjadi orang tua-nya adalah element body. Element body ini bisa kita akses melalui property parentElement.

Sedangkan untuk sibling atau saudara kandung, ada dua buah property yang bisa kita gunakan untuk mengaksesnya, yaitu property previousElementSibling untuk mengakses element sibling yang berada di sebelum element kita. Dan property nextElementSibling untuk mengakses element sibling yang berada di setelah element kita. Pada contoh kita, element ol, maka previousElementSibling adalah element h1. Sedangkan nextElementSilbing-nya tidak ada, karena kebetulan element ol adalah anak bungsu.

Untuk children atau element anak, bisa kita akses melalui property children. Kita akan mendapatkan hasil dalam bentuk HTMLCollection, yang isinya adalah daftar element anak. Untuk contoh kita element ol memiliki 3 buah anak yang berupa element li.

Kita langsung coba praktek ya. Disini saya sudah menyediakan file HTML yang sama persis dengan slide. Kita bisa lihat isi dari body ada element img, h1, dan ol. Lalu di dalam element ol terdapat 3 buah element li. Sesuai dengan contoh sebelumnya, kita ingin mengambil element ol. Agar lebih mudah, kita tambahkan saja attribute id=”el”. El disini maksudnya adalah element.

Kita lihat hasilnya di browser. Lalu kita buka console ya. Kita buat variable baru dengan nama el. Setelah itu kita ambil element ol dengan menggunakan method document.getElementById(“el”). Kita cek isi dari variable el. Sudah benar ya. Kita sudah berhasil mengambil element ol.

Kita bisa melihat orang tua dari element ol dengan menggunakan property parentElement. Kita ketik kodenya menjadi el.parentElement. Dan kita mendapatkan hasil element body.

Untuk melihat sibling atau saudara kandung, pertama kita tentukan dahulu hendak melihat sibling dari posisi sebelum atau sesudah element kita. Kebetulan element ol berada di ujung kanan dari sibling, artinya sudah tidak ada sibling sesudah ol. Jadi kita coba dahulu untuk melihat sibling dari posisi sebelum ya. Kita bisa tulis kodenya el.previousElementSibling. Maka kita mendapatkan hasil element h1.

Perhatikan bahwa pada nama property terdapat kata Element. Artinya kita mengambil sibling yang berupa sebuah element. Tadi pada waktu mengetikkan property, teman-teman bisa melihat ada property yang namanya previousSibling ya. Nama property-nya lebih singkat. Namun teman-teman mesti berhati-hati pada saat menggunakan property ini, karena property mengembalikan hasil yang berupa node, bukan element. Node ini mencakup object yang lebih luas, bisa saja berupa teks atau comment.

Kita coba ya. Kita ketik kodenya el.previousSibling. Dan ternyata hasilnya adalah teks. Kalau kita buka detilnya, disini kita bisa melihat nodeValue adalah “\n”. Artinya disini adalah new line atau tombol enter. Kalau kita lihat kembali ke kode HTML, setelah tag penutup h1, kita menekan enter sehingga tag ol berada di baris berikutnya. Kita melakukan hal ini agar kode kelihatan lebih rapi. Namun ternyata di dalam dom, Javascript menambahkan satu buah node diantara tag h1 dan ol. Node ini berisikan karakter enter tersebut.

Kita bisa coba ya. Kalau semua spasi dan enter diantara tag penutup h1 dan ol dihapus. Kita kembali ke browser. Refresh dan kita panggil kembali previousSibling ya. Maka kita mendapatkan element h1. Karena diantara kedua sibling ini sudah tidak ada node new line.

Kita lihat lagi contoh lain ya, node yang berupa komentar. Jadi diantara tag h1 dan ol, kita sisipkan sebuah komentar, misalkan kita tulis saja komentar baru. Kita refresh browser. Kita panggil lagi previousSibling. Ternyata sekarang hasilnya adalah node komentar ya. Dan kita bisa membaca isi dari komentar tersebut.

Kita kembalikan source code kita ke semula. Kita sudah melihat contoh kasusnya ya. Node bisa berupa element, teks maupun komentar. Jadi kalau kita hendak mengambil sibling namun menginginkan hasil yang berupa element, maka lebih baik kita menggunakan property previousElementSibling.

Sekarang kita coba nextElementSibling ya. Tentunya teman-teman bisa menebak hasilnya apa? Hasilnya adalah null. Karena tidak ada sibling setelah element ol.

Selanjutnya, kalau kita ingin melihat element-element apa saja yang merupakan anak dari tag ol, maka kita bisa menggunakan property children. Kita mendapatkan hasil yang berupa HTMLCollection, yang isinya adalah 3 buah element li. Teman-teman tentunya masih ingat ya, kalau jenis object-nya adalah HTMLCollection, artinya semua isinya sudah pasti berupa element. Jadi kita tidak perlu mengkhawatirkan kalau kita mendapatkan hasil berupa teks atau comment.

Kita coba pilih element lain sebagai contoh ya. Misalkan element li kedua. Jadi nantinya element ini memiliki sibling baik di bagian sebelum maupun sesudah. Kita pindahkan attribute id=”el” ke element ini. Kita refresh browser.

Teman-teman bisa sambil menebak hasil dari property-nya ya. Kita coba dahulu parentElement. Hasilnya adalah element ol. Kita coba previousElementSibling, maka hasilnya adalah li “Daftar Pertama”. Kalau nextElementsSibling, hasilnya adalah li “Daftar Ketiga”. Sedangkan childrennya adalah HTMLCollection kosong. Karena element li ini sudah tidak memiliki anak.

Yang perlu diperhatikan disini adalah kita bisa melakukan penelusuran secara berkelanjutan. Misalkan kalau kita mengambil parentElementnya berupa ol. Kemudian bisa kita telusuri lagi ke parentnya lagi, sebagai hasilnya kita mendapatkan kakek dari li, yaitu element body. Kita juga bisa melakukan penelusuran menggunakan kombinasi. Misalnya dari parent, kita telusuri ke previousElementSibling. Atau bisa juga dari parent, kita telusuri childrennya.

Kita sudah belajar mengenai DOM Traversal ya. Jadi dengan menggunakan DOM Traversal, kita bisa menelusuri element HTML dengan menggunakan element yang sudah kita pilih. Yang paling penting disini adalah kita tau kapan kita harus menggunakan parent, kapan kita harus menggunakan sibling, dan kapan kita harus menggunakan children.

Sekarang kita masuk ke contoh kasus kapan kita harus menggunakan DOM Traversal. Misalkan kita memiliki halaman web yang berfungsi untuk menampilkan banyak card atau kartu. Di setiap kartu, kita memiliki sebuah teks dan sebuah tombol dengan tulisan X. Disini kita akan menulis script sederhana, dimana kalau kita mengklik tombol X, maka kartu yang bersangkutan menghilang dari layar.

Kita lihat dahulu kode HTML-nya ya. Untuk setiap card, kita memiliki container dengan kelas card. Di dalamnya terdapat teks dengan kelas card-text. Dan kemudian ada button dengan kelas btn-close.

Kita buka Javascript-nya ya. Jadi kita akan membuat sebuah function yang kalau diklik, akan menghilangkan card yang bersangkutan. Kita beri nama function-nya sebagai onButtonCloseClick. Isi function-nya? Nah, di dalam CSS, saya sudah menyediakan satu buah kelas dengan nama d-none yang akan menset property display menjadi none, sehingga tag tersebut menghilang dari layar. Kita tinggal menambahkan kelas tersebut ke dalam classList.

Bagaimana caranya? Pertama kita akses dahulu element yang sedang diklik dengan menggunakan kata kunci this. Lalu kita akses property classList dan kita panggil method add untuk menambahkan “d-none”. Setelah itu kita lakukan looping untuk semua element dengan class “btn-close”. Kita tambahkan Event Listener “click” dengan funciton onButtonCloseClick.

function onButtonCloseClick()
{
  this.classList.add("d-none");
}

for(el of document.getElementsByClassName("btn-close"))
{
  el.addEventListener("click", onButtonCloseClick);
}

Kita simpan dan coba di browser. Kita coba klik ke salah satu tombol x. Ternyata yang hilang hanya tombolnya saja ya. Begitu juga dengan tombol lainnya. Mengapa hal ini bisa terjadi?

Karena pada function onButtonCloseClick, kita hanya menghilangkan element yang sedang diklik. Kalau kita lihat ke kode HTML, maka yang hilang adalah si “btn-close”. Sedangkan yang ingin kita hilangkan adalah si “card”. Apakah hubungan antara “card” dengan “btn-close”? Perhatikan disini bahwa “card” adalah orang tua dari “btn-close”. Jadi di dalam function onButtonCloseClick, kita harus melakukan penelusuran terlebih dahulu. Kita mesti mengambil orang tua dari this. Maka kita tambahkan lagi property parentElement, sehingga kodenya menjadi:

function onButtonCloseClick()
{
  this.parentElement.classList.add("d-none");
}

Kita simpan dan coba lagi di browser. Dan sekarang script kita sudah berfungsi dengan benar ya. Jadi kalau tombol close ditekan, maka yang dihilangkan adalah parent dari tombol tersebut. Disini kita bisa melihat contoh kasus, dimana kita bisa dengan mudah memecahkan masalah apabila kita bisa melakukan penelusuran element HTML dari element yang sedang kita tunjuk. Disinilah kegunaan dari DOM Traversal.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.