Kita memasuki materi baru Javascript, yaitu Document Object Model atau disingkat DOM. Nah, bagi teman-teman yang mengikuti kursus lengkap Front End Developer dari awal, materi ini akan sangat menarik, karena disini kita akan berjumpa kembali dengan HTML dan CSS yang telah kita pelajari sebelumnya. Dengan menggunakan DOM, nantinya script yang kita tulis menggunakan Javascript dapat mengakses seluruh HTML dan CSS dari halaman yang bersangkutan. Sehingga kita bisa melakukan perubahan seperti menambahkan elemen HTML baru, mengubah konten pada HTML. Kita pun bisa mengubah CSS yang sedang digunakan, seperti mengubah warna, font, ataupun mengubah kelas yang sedang digunakan oleh suatu elemen. Dan kedepannya, materi DOM ini akan menjadi materi yang paling banyak kita gunakan pada saat melakukan pemograman web.

Apakah yang dimaksud dengan DOM? Di sebelah kiri slide kita bisa melihat ada browser yang sedang membuka suatu situs. Yang dimaksud dengan DOM adalah, semua elemen-elemen yang membentuk tampilan situs yang kita lihat di browser ini, direpresentasikan oleh Javascript menjadi Object-Object yang saling terhubung seperti diagram di sebelah kanan. Hubungan antar object-nya berbentuk seperti tree atau pohon. Dimana object yang berada di bagian atas adalah orang tua, sedangkan object yang berada di bagian bawahnya adalah anak.

Agar lebih jelas, kita lihat ke contoh kode HTML sederhana di bagian kiri slide, yang direpresentasikan menjadi diagram object di sebelah kanan. Bagian paling atas dari DOM adalah object spesial dengan nama document. Dibawah dokumen adalah elemen yang berada di paling luar dari kode html, yaitu elemen HTML. Di dalam elemen HTML, terdapat 2 buah elemen yaitu head dan body. Perhatikan pada source code, posisi elemen head dan body berada di dalam elemen HTML. Sedangkan pada diagram, elemen HTML menjadi orang tua dengan 2 buah anak, yaitu head dan body. Dan teman-teman bisa perhatikan juga hubungan antara elemen berikutnya ya. Di dalam head, terdapat meta dan title. Sedangkan di dalam body terdapat h1 dan ol. Sedangkan di dalam ol terdapat 3 buah li.

Kita langsung coba praktek ya. Disini ada kode html sederhana seperti yang kita lihat pada slide tadi. Di dalam tag body, hanya ada tag h1 dan tag ol. Dimana di dalam tag ol terdapat 3 buah tag li. Kalau kita lihat tampilannya di browser seperti ini. Lalu kita buka console.

Pertama kita lihat dahulu object spesial dari DOM ya, object yang merupakan induk dari semua object DOM, yang diberi nama document. Kita ketik nama variable-nya, document. Dan kalau kita lihat pada Chrome, yang keluar adalah kode HTML. Sama persis dengan source code kita tadi. Ini hanya cara Chrome menampilkan isi dari variable document saja ya, karena seperti yang telah saya sebutkan tadi, document adalah object yang spesial.

Isi dari object document yang aslinya bukanlah kode HTML. Kalau kita ingin melihat object aslinya, kita bisa mengetikkan perintah

console.dir(document);

Nah, sekarang kita bisa melihat document yang bentuknya benar-benar object. Dan sebagai object, kita bisa melihat bahwa document memiliki banyak property dan method yang bisa kita gunakan. Sebagai contoh, disini ada property all, yang isinya adalah semua elemen HTML yang terdapat di source code. Di sebelah kirinya ada nomor urut index, dan kalau kita perhatikan urutannya sesuai dengan source code dimulai dari paling atas.

Perhatikan di bagian paling bawahnya ada 3 buah elemen li ya. Kalau kita arahkan mouse kita ke atas object li, maka browser secara otomatis menujukkan posisi dari elemen tersebut pada tampilan halamannya. Ketiga elemen ini berurutan dari Daftar Pertama, Daftar Kedua dan Daftar Ketiga.

Misalkan kita hendak mengakses li kedua, yang isinya adalah Daftar Kedua. Kita bisa mengetikkan kodenya menjadi:

document.all[8];

Jadi kita mengakses property all dari object document. Dan berhubung kita hendak mengakses object dengan index delapan, maka kita mengetikkan kurung siku delapan. Sekarang kita sedang mengakses li yang kedua, dan kita bisa melihat browser sedang memberikan highlight pada elemen yang bersangkutan.

Dengan mengakses object elemen li ini, maka kita bisa melakukan perubahan pada halaman situs, dengan menggunakan kode Javascript. Kita bisa mengubah kontennya, attributenya, atau bahkan juga css yang sedang digunakan oleh elemen tersebut. Sebagai contoh, kita coba ubah kontennya dari “Daftar Kedua” menjadi “Skysen Solution”. Kita bisa menggunakan property innerText. Kita ketik kodenya:

document.all[8].innerText = "Skysen Solution";

Pada saat kita mengetikkan nama property-nya innerText, maka browser sudah memperlihatkan bahwa isi property innerText pada saat ini adalah “Daftar Kedua”. Kita bisa mengganti isi property dengan menggunakan operator sama dengan dan mengetikkan string baru “Skysen Solution” sebagai penggantinya.

Perhatikan bahwa setelah kita menjalankan kode Javascript, maka konten pada browser berubah. “Daftar kedua” berubah menjadi “Skysen Solution”.

Kita lihat lagi contoh kedua. Misalkan kita hendak mengubah warnanya menjadi merah. Maka kita bisa mengetikkan kodenya:

document.all[8].style.color = "Red";

Perhatikan setelah kita jalankan kode tersebut, maka daftar yang kedua berubah warna menjadi merah.

Jadi dengan menggunakan DOM, maka kita bisa mengakses kembali seluruh kode HTML dan CSS dan kemudian kita bisa melakukan perubahan pada saat halaman tersebut ditampilkan di browser. Dengan menggunakan teknik seperti ini, maka kita bisa membuat halaman yang bersifat dinamis. Halaman yang isinya bisa berubah-ubah sesuai dengan interaksinya dengan pengunjung situs.

Apa saja materi yang akan kita pelajari dalam playlist DOM ini? Yang pertama adalah DOM Selector. Disini kita akan belajar cara memilih elemen mana yang hendak kita ubah. Dalam contoh sebelumnya kita menggunakan document.all. Dalam kenyataannya, kita tidak pernah menggunakan property ini untuk memilih elemen, karena cara menggunaannya susah. Kita mesti mencari dahulu nomor urut elemen. Dan yang lebih repotnya lagi, apabila kita mengubah kode HTML, maka ada kencenderungan nomor urut elemennya akan turut berubah. Sehingga kita kerepotan untuk menjaga agar script kita tetap berfungsi dengan benar.

Ada beberapa method lain yang lebih baik untuk digunakan dalam DOM Selector. Method yang paling sering digunakan adalah getElementById dan querySelector. Selain itu kita juga akan belajar mengenai beberapa method alternatif seperti getElementsByClassName, getElementsByTagName dan querySelectorAll.

Materi kedua yang akan kita pelajari adalah DOM Manipulation. Jadi setelah kita berhasil memilih elemen, maka langkah berikutnya yang kita lakukan adalah melakukan perubahan terhadap elemen tersebut. Pada contoh sebelumnya kita telah mengubah konten elemen dengan menggunakan property innerText, dan kita telah mengubah warna elemen dengan menggunakan property style.color. Nantinya kita akan belajar lebih banyak lagi mengenai perubahan yang bisa kita lakukan pada elemen yang telah kita pilih.

Materi ketiga yang akan kita pelajari adalah Event Handler. Dengan menggunakan Event Handler, maka kita bisa mengatur apa saja yang akan terjadi pada saat pengunjung situs melakukan interaksi kepada situs kita. Sebagai contoh, kita meletakkan suatu tombol pada halaman situs, dan kemudian kita bisa mengatur apa saja yang akan terjadi pada saat pengunjung mengklik tombol tersebut.

Dan materi terakhir yang tidak kalah pentingnya yang perlu kita pelajari disini adalah DOM Traverse. Dengan menggunakan DOM Traverse, maka kita bisa menelusuri element lain melalui element yang telah kita pilih. Jadi kita bisa menelusuri element mana yang menjadi orang tua dari element ini, lalu kita bisa melihat juga element-element mana saja yang menjadi anak, atau elemen yang berada di samping atau disebut dengan sibling atau saudara kandung.

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.