Saat kamu memutuskan akan belajar Javascript, maka wajib hukumnya memahami tentang DOM. Show
Karena… Salah satu tugas utama Javascript di dalam web adalah membuat halaman web agar terlihat dinamis. Hal ini bisa dilakukan oleh Javascript dengan bantuan DOM. Apa itu DOM API? …dan bagaimana cara menggunakannya? Mari kita bahas… Apa itu DOM API?DOM merupakan singkatan dari Document Object Model. Artinya, dokumen (HTML) yang dimodelkan dalam sebuah objek. Objek dari dokumen ini menyediakan sekumpulan fungsi dan atribut/data yang bisa kita manfaatkan dalam membuat program Javascript. Inilah yang disebut API (Application Programming Interface). DOM tidak hanya untuk dokumen HTML saja. DOM juga bisa digunakan untuk dokumen XML dan SVG. …dan DOM juga tidak hanya ada di Javascript saja, DOM juga ada pada bahasa pemrograman lain. Bagaimana Cara Menggunakan DOM?Seperti yang kita sudah katahui, DOM adalah sebuah objek untuk memodelkan dokumen HTML. Objek DOM di javascript bernama Jika kita coba ketik Di dalam objek Sebagai contoh fungsi Fungsi ini digunakan untuk menulis sesuatu ke dokumen HTML. Contoh: Coba ketik kode berikut di dalam consoel Javascript.
Hasilnya: Fungsi Write di JavascriptLihatlah! Hasilnya akan langsung berdampak pada dokumen HTML. Mengkases Elemen Tertentu dengan DOMObjek Struktur pohon ini akan memudahkan kita dalam menggunakan elemen tertentu. Mari kita coba mengakses objek Coba ketik kode berikut pada Console:
Hasilnya: Apabila kita ingin mengakses elemen yang spesifik, terdapat beberapa fungsi yang bisa digunakan:
Fungsi-fungsi di atas cukup sering digunakan untuk mengakses elemen tertentu. Contoh: Misalkan kita punya kode HTML seperti ini:
Maka untuk memilih element tersebut di Javascript, kita bisa gunakan fungsi
Variabel Contoh yang lebih lengkap:
Hasilnya: Pada contoh di atas, kita memilih elemen dengan fungsi Lalu pertanyaanya: Bagaimana kalau ada lebih dari satu elemen yang dipilih? Misalkan kita memilih elemen berdasarkan nama tag atau atribut class. Jawabannya: Eelemn yang akan terpilih akan menjadi sebuah array. Karena kita memilih sekumpulan elemen. Array tersebut akan berisi objek DOM dari elemen-elemen yang terpilih. Contohnya:
Pada contoh di atas, kita memiliki tiga buah paragraf dengan nama class Lalu kita mencoba memilih ketiga paragraf tersbut melalui javascript dengan method atau fungsi Kemudian, hasilnya kita tampilkan ke dalam console Javascript. Maka hasilnya: Variabel
Mari kita coba bereksperimen dengan mengubah warna teks dari paragraf pertama. Paragraf pertama akan barada pada posisi indeks ke- Coba ketik perintah berikut di dalam console Javascript:
Maka hasilnya, paragraf pertama akan berwarna merah. Mari kita coba buat sebuah animasi warna. Ubahlah kode javascript di atas menjadi seperti ini:
Kita memanfaatkan fungsi Pada kode diatas, rentang waktu (interval) kita berikan Sedangkan untuk merubah warnanya menjadi hitam, kita berikan waktu Maka hasilnya: Membuat Elemen dengan DOM APIDOM juga menyediakan fungsi untuk membuat elemen HTML. Salah satunya adalah fungsi Contoh:
Maka, akan tercipta elemen Mengapa tidak ditampilakn? Karena kita belum menambahkannya ke dalam body dokumen. Cara menambahkannya ke body dokumen, kita bisa gunakan fungsi Contoh:
Hasilnya: Menghapus Elemen dengan DOM APIKalau tadi kita menggunakan fungsi Berikut ini contohnya:
Hasinya: Elemen berhasil dihapus dari halaman web, namaun elemen masih berada di dalam memori. Contoh Program yang Memanfaatkan DOMKita sudah tahu cara mengakses elemen dengan DOM dan kita juga sudah paham cara menambahkan dan menghapus elemen. Biar pemahamannya semakin mantap, coba contoh program berikut:
Program ini berfungsi untuk mengubah warna latar belakang dari elemen Kita menggunakan event Hasilnya: Apa Selanjutnya?Kedepannya kita akan banyak menggunakan DOM untuk membuat aplikasi dengan Javascript. Selanjutnya, silahkan pelajari tentang:
Apa itu document write?Menggunakan Fungsi document.write()
Objek document adalah objek yang mewakili dokumen HTML di dalam Javascript. Dalam objek document , terdapat fungsi write() untuk menulis sesuatu ke dokumen HTML. Selain fungsi write() , objek document juga menyediakan berbagai macam fungsi untuk manipulasi dokumen HTML.
Apa fungsi dari document getElementById?getElementById() fungsi untuk memilih elemen berdasarkan atribut id .
Apa itu DOM dalam Javascript?DOM merupakan kependekan dari Document Object Model, DOM ini yakni object model standar bagi XML dan HTML yang memiliki sifat platform independent. Saat membuka sebuah halaman web pada browser, maka file HTML dari web akan dimuat serta ditampilkan pada layar perangkat.
Apa itu manipulasi DOM?“DOM atau Document Object Model merupakan objek JavaScript spesial yang hanya ada di environment Browser. Objek ini digunakan untuk mendapatkan struktur dokumen website, bahkan memanipulasinya.”
|