Tahukah kamu mengenai JavaScript DOM? Untuk kamu ketahui, sebuah JavaScript bisa berfungsi apabila ada DOM di dalamnya. DOM sendiri merupakan singkatan dari Document Object Model.
Lalu, apakah yang dimaksud dengan DOM pada JavaScript? Kali ini, kamu akan mempelajarinya secara lebih mendalam. Mulai dari pengertian, fungsi, cara kerja, hingga contoh-contohnya, Sob.
Pengertian DOM Js
JavaScript DOM adalah interface yang membuat developer bisa memanipulasi halaman web dari segi struktur, tampilan, maupun kontennya.
Sebagaimana yang kita ketahui, pembuatan website semula bermula dari HTML dan CSS style yang statis.
Nah, setelah adanya JavaScript ini, membuat tampilan website menjadi lebih dinamis. Website jadi bisa diklik, drag and drop, dan masih banyak lagi lainnya. DOM berperan supaya bahasa statis bisa berkomunikasi dengan bahasa dinamis.
DOM (Document Object Model) inilah yang memungkinkan JavaScript mengakses dan memanipulasi semua elemen statis di halaman tersebut. Dengan begitu, halaman web bisa menjadi lebih dinamis.
DOM document merupakan semua objek yang ada di dalam halaman web. Saat kamu ingin mengakses objek apa pun yang ada pada halaman web, maka selalu berawal dari dokumen tersebut.
Fungsi Javascript DOM
Setelah membahas pengertiannya, sekarang saatnya kita membahas apa fungsi DOM JavaScript. Berikut ini beberapa kegunaannya yang harus kamu ketahui:
1. Memanipulasi Elemen Pada Halaman Website
Ini adalah fungsi utama dari DOM pada JavaScript. Dokumen ini bisa memanipulasi elemen yang ada pada halaman website.
Website yang semula bersifat statis (tidak bergerak) bisa berubah menjadi dinamis (bergerak) karena adanya manipulasi elemen.
2. Melakukan Aksi Pada Elemen
Fungsi dari DOM selanjutnya adalah mampu melakukan aksi pada elemen. Misalnya yaitu menekan tombol, menggeser (scroll) halaman, dan lain sebagainya.
Setiap elemen yang ada pada website bisa berfungsi statis karena adanya peran dari DOM atau Document Object Model.
3. Menambahkan dan Menghapus Elemen
Dalam proses pembuatan website, elemen bisa kamu tambah atau kurangi sesuai kebutuhan. JavaScript DOM adalah dokumen yang berperan melakukan hal tersebut.
Tampilan website di browser terdiri dari elemen yang berbeda-beda. Misalnya yaitu elemen img di sebuah elemen body. Elemen img, HTML memiliki anak head dan body.
DOM bisa menghapus pada elemen tertentu yang sudah tidak kamu butuhkan lagi. Selain itu, kamu juga dapat menambahkan elemen baru pada DOM tersebut.
4. Mengubah Atribut Elemen
Selain menambahkan dan menghapus, JavaScript DOM juga dapat mengubah atribut elemen. Contohnya yaitu mengubah ‘href’ di elemen ‘a’ untuk membuat link dan mengubah atribut ‘src’ di elemen ‘img’ untuk mengatur gambar.
5. Memberikan Respon
DOM JavaScript dapat memberikan respon aksi pada elemen. Contohnya yaitu memberi respon pada saat website kamu klik. Sebagaimana yang kamu ketahui, tentu saja website harus bisa kamu klik supaya bisa digunakan.
Properti DOM JavaScript
Pada DOM JavaScript juga terdapat properti yang berguna mengakses atau memodifikasi dokumen HTML yaitu:
1. Document Object
Dokumen HTML yang telah dimuat di dalam Window memiliki sejumlah properti terhubung dengan objek lainnya. Dengan adanya Document Object, semua isi yang ada di website bisa kamu akses dan juga modifikasi.
Jika kamu ingin mengakses elemen yang ada di HTML, properti yang bisa kamu akses seharusnya adalah object.
2. Window Object
Window object adalah objek di browser yang ada pada puncak hierarki. Objek ini secara otomatis dibuat oleh browser serta digunakan untuk seluruh properti.
3. Anchor Object
Anchor Object adalah properti di DOM yang dapat mempresentasikan ‘a href tags’ di dokumen HTML. Biasanya hal ini untuk membuat teks pada link atau tautan di suatu website.
4. Link Object
Link Object adalah properti di DOM JavaScript yang dapat mempresentasikan link tags di dokumen HTML.
5. Form Control Element
Form Control Elements adalah properti pada DOM yang dapat kamu gunakan untuk mengatur elemen di formulir. Contohnya seperti tombol, kolom teks, checkbox, dan masih banyak lagi lainnya.
6. Form Object
Form Object adalah properti di DOM JavaScript yang dapat mempresentasikan form tags di dokumen HTML.
Cara Kerja DOM JavaScript
Seperti pada penjelasan sebelumnya, DOM memiliki beberapa fungsi seperti menambahkan, menghapus, mengubah, mengambil, atau melakukan tindakan pada elemen. Ternyata, hal tersebut bisa terjadi dengan cara sebagai berikut:
1. Mengambil Elemen HTML
Mengambil elemen HTML dapat kamu lakukan dengan beberapa cara sehingga bisa membuat stylus di dalam situs web. Bagaimana caranya?
- Menggunakan Nama Class: cara pertama yaitu dengan memakai nama class atau menggunakan metode getElementsByClassName(). Kemudian, simpan hasilnya pada suatu variabel.
- Memakai Nama ID: Selain menggunakan class, kamu juga bisa menggunakan nama ID. Gunakan metode getElementsByID() lalu simpan di suatu variabel. var titl dengan perintah tersebut.
- Menggunakan Nama Tag: cara mengambil elemen HTML bisa menggunakan nama tag atau dengan metode getELementsByTagName().
- Memakai QuerySelector: pengambilan elemen HTML ini memungkinkan kamu untuk mengembalikannya pada elemen pertama. Pengembaliannya sesuai dengan SS Selector yang sudah ditentukan sebelumnya dan memakai ID kelas, tag atau CSS Selector yang valid.
- Memperoleh Elemen Secara Spesifik: untuk mendapatkan elemen secara spesifik, kamu bisa memanfaatkan CSS Selector. Tidak hanya itu saja, kamu juga bisa mencari kelas atau tag secara bersamaan.
- Menggunakan QueryselectorAll: caranya kurang lebih sama seperti metode QuerySelector. Hanya saja, terdapat perbedaan ketika kamu mengembalikan elemen yang sama menggunakan CSS Selector.
2. Mengubah Elemen HTML
Selain mengambil elemen, DOM juga bisa mengubah elemen HTML. Metode yang bisa kamu lakukan yaitu:
- Menggabungkan innerHTML dengan ID: metode pertama yaitu dengan menggabungkan innerHTML dan ID Header serta mengatur konten innernya sesuai kebutuhan.
- Menggabungkan innerHTML dengan Metode getElemensByTagName: cara kedua yaitu menggabungkan innerHTML dan getElemensByTagName sesuai keinginan.
- Mengubah Tampilan: caranya yaitu dengan mengubah properti style document.getElementById(id).style.property = new style lalu mengambil elemen tertentu untuk diambil style-nya.
3. Menambahkan atau Menghapus Elemen HTML
Untuk menghapus atau menambah elemen pada HTML, ada cara yang bisa kamu lakukan yaitu:
- Untuk menambahkan elemen, gunakan metode createElement().
- Sedangkan untuk menghapus elemen menggunakan metode removeChild().
Contoh DOM JavaScript
Ada banyak contoh-contoh penerapan DOM JavaScript pada suatu elemen HTML. Beberapa diantaranya yaitu:
1. var elem = document.querySelector(‘#header’); elem.parentNode.removeChild(elem);
Ini merupakan salah satu DOM yang berguna untuk menghapus elemen HTML. Sebagaimana penjelasan sebelumnya, penghapusan elemen memakai metode removeChild().
2. var items = document.getElementsByClassName(‘list-items’);
Sintaks tersebut merupakan hasil penerapan dari penggunaan metode metode getElementsByClassName(). Method ini bisa menghasilkan lebih dari satu objek dan kamu akan memperoleh seluruh item dengan class lalu menyimpannya ke variabel.
3. var title = document.getElementById(‘header-title’);
DOM JavaScript yang satu ini adalah contoh penggunaan pengambilan elemen HTML dengan ID. Kamu bisa memperoleh lebih dari satu objek apabila menggunakan method yang satu ini.
Dari contoh tersebut, kamu bisa mendapatkan elemen dengan id header-title, lalu bisa kamu simpan ke dalam variabel
Selain ketiga contoh tersebut, tentu saja masih banyak contoh DOM yang lainnya. Kamu bisa mempelajari materi mengenai JavaScript secara lebih mendalam hanya di Jagoan Hosting.
FAQ
Ada berapa jenis-jenis DOM?
Ada tiga jenis yaitu Core DOM untuk merepresentasikan dokumen HTML atau XML sebagai struktur objek, XML DOM untuk mempresentasikan dokumen XML sebagai pohon objek, dan HTML DOM yang mewakili dokumen HTML.
Apa standar penggunaan DOM?
DOM menggunakan standar dari W3C (World Wide Web Consortium).
Kapan pengembangan DOM pertama kali?
JavaScript DOM pertama kali berkembangan berbarengan dengan hadirnya JavaScript dan browser awal yang tentu saja masih sangat sederhana.
