Pengertian DOM
DOM(Document Object Model) adalah model data standar. DOM adalah cara javascript melihat suatu halaman html. DOM adalah sebuah platform dan interface yang memperbolehkan pengaksesan dan perubahan pada konten, struktur, dan style pada sebuah dokumen oleh program dan script. Istilah HTML DOM mengacu kepada dokumen html. Kasusnya disini ialah konten, struktur, dan style pada dokumen html dapat diakses dan dirubah dengan menggunakan sintaks javascript.
- Hal yang dapat dilakukan Javascript dengan DOM
- Javascript dapat merubah setiap elemen HTML pada halaman web.
- Javascript dapat merubah setiap atribut HTML pada halaman web.
- Javascript dapat merubah setiap style CSS pada halaman web.
- Javascript dapat menghilangkan elemen dan atribut HTML yang ada.
- Javascript dapat menambahkan elemen dan atribut HTML baru.
- Javascript dapat bereaksi pada setiap event yang ada pada halaman web.
- Javascript dapat membuat event baru pada halaman web.
- querySelector() vs querySelectorAll()
Ada dua cara dalam memilih DOM yaitu dengan querySelector() dan querySelectorAll(). Apa beda keduanya?
- querySelector()
Adalah sebuah method yang kita pakai untuk memilih satu DOM saja. Cara pakainya, kita masukkan dulu ke dalam sebuah variable.
- querySelectorAll()
Sedangkan untuk querySelectorAll ini sebaliknya, kita bisa mengambil semua DOM dengan selector yang kita tentukan. Jadi misal ada 10 div, kita bisa mengambilnya semua, dan nanti akan disimpan berupa Nodelist, sebuah untaian.
- Bekerja dengan atribut
Ada kalanya dalam menangani DOM, kita harus mengubah atribut-nya secara terprogram. Btw, tau atribut kan? Buat yang belum tahu, atribut itu kaya class, id, action, type, dalam sebuah elemen HTML. Dan kita bisa menambahkan kustom atribut sesuai kebutuhan. Untuk mengatur atribut, kita pakai yang namanya setAttribute.
Jadi di parameter pertama itu nama atributnya, disusul dengan value-nya. Kemudian, untuk mengambil value dari atribut yang sudah ada, kita pakai method getAttribute. Method ini hanya ada satu parameter, yaitu nama atribut yang akan diambil valuenya.
- Mengubah isi DOM
Terkadang kita perlu mengubah isi dari DOM. Contoh penggunaan biasanya untuk elemen yang memuat pesan notifikasi alert. Kan gak mungkin tuh bikin banyak div dengan pesan dan style yang beda-beda. Pastinya cuma bikin 1, terus isinya diubah pakai JS, secara default isinya “Data berhasil disimpan”, sedangkan kalau gagal, diganti “Gagal menyimpan data”. Mengubahnya yaitu dengan innerHTML. Dengan mengubah isi DOM maka kita dapat memanipulasi dengan lebih mudah.
- Kesimpulan dan Penutup
Untuk membuat tampilan website lebih dinamis tentu saja kita membutuhkan DOM untuk memanipulasinya, dengan adanya DOM kita dapat dengan mudah memanipulasi HTML agar terlihat lebih menarik.
Kebutuhan akan digital IT sangat dibutuhkan dalam kegiatan sehari-hari, Bead IT Consultant merupakan pilihan tepat sebagai partner anda,kunjungi website kami dengan klik link ini : www.beadgrup.com