Dalam JavaScript, DOM adalah sesuatu yang wajib dipahami terutama jika kamu ingin mempercantik website. Tugas utama JavaScript dalam web development pada dasarnya untuk membuat halaman web terlihat lebih dinamis dan interaktif. Nah, hal ini dapat terwujud berkat adanya DOM.
Lantas, apa itu DOM dan bagaimana cara menggunakannya? Di artikel ini, Dewaweb akan jelaskan semua informasi yang kamu butuhkan seputar JavaScript DOM termasuk cara membuat dan menghapusnya. Simak pembahasannya sampai akhir, ya!
Apa itu DOM API?
Document Object Model atau DOM adalah antarmuka yang digunakan untuk mengubah style halaman website. Dalam hal ini, DOM memungkinkan kamu memanipulasi fungsi dan atribut/data terutama dari segi struktur, tampilan, hingga kontennya. Website yang tadinya tersusun dari CSS dan HTML statis dapat diubah menjadi halaman yang lebih menarik dan dinamis.
Sederhananya, adanya dokumen HTML dan CSS memungkinkan JavaScript mengakses dan mengubah elemen website. Nah, hasil document object model yang di dalamnya terdapat dokumen-dokumen tersebut nantinya akan dimunculkan oleh browser.
Bukan hanya JavaScript, interface ini bisa kamu temui pada bahasa pemrograman lain seperti Python, C++, PHP, dan sebagainya. Selain itu, DOM juga dapat digunakan untuk dokumen diluar HTML seperti SVG dan XML.
Baca Juga: Perbedaan Website Statis dan Website Dinamis Beserta Contohnya
Bagaimana Cara Menggunakan DOM?
Bisa dibilang bahwa DOM adalah objek untuk mewakili dokumen HTML. Pada JavaScript, objek DOM diberi nama ‘document’ dan berisi berbagai fungsi yang dibutuhkan untuk memanipulasi dokumen tersebut. Jika kamu ketikkan ‘document’ pada console JavaScript, maka yang akan muncul adalah kode untuk dokumen HTML.
Selain itu, ada sejumlah fungsi dan atribut yang bisa kamu gunakan untuk memanipulasi HTML. Salah satunya adalah ‘document.write’ yang berfungsi untuk menulis dan menambah teks ke dalam dokumen. Simak contoh berikut ini:
Coba ketikkan kode di bawah ini pada console JavaScript.
Perhatikan, hasil penulisan kode akan langsung berdampak pada dokumen HTML seperti gambar berikut.
Baca Juga: Single Page Application: Pengertian, Kelebihan & Kekurangannya
Mengakses Elemen Tertentu dengan DOM
Dalam penggunaannya, kamu dapat mengakses elemen tertentu dengan DOM. Setidaknya, ada lima metode yang bisa digunakan jika kamu ingin mengakses elemen HTML, di antaranya:
Baca Juga: Cara Membuat Website Single Page dengan Mudah
1. Mengambil Elemen dengan ID
Melalui method getElementById(), kamu bisa mendapatkan lebih dari satu objek. Berikut contoh scriptnya:
Di sini, kamu bisa mengambil elemen lengkap dengan ID ‘footer-title’ kemudian menyimpannya ke sebuah variabel.
2. Mengambil Elemen dengan Class
Mengambil elemen dengan class bisa kamu lakukan menggunakan method getElementsByClassName(). Berikut contoh scriptnya:
Melalui method ini, DOM JavaScript dapat mengambil semua elemen yang ada dalam class ‘list-items’. Kamu juga dapat menyimpannya ke dalam sebuah variabel.
3. Mengambil Elemen dengan Nama Tag
Untuk mengambil elemen dengan nama tag, kamu bisa menggunakan method getElementsByTagName(). Contoh scriptnya seperti di bawah ini:
Dengan method tersebut, kamu bisa mengambil seluruh elemen dengan tag ‘li’ dari dokumen HTML yang selanjutnya dapat disimpan sebagai variabel.
4. Mengambil Elemen dengan querySelector
Selain dokumen HTML, dengan method querySelector() kamu dapat mengambil semua elemen yang ada dalam CSS. Berikut contoh scriptnya:
Melalui method di atas, DOM JavaScript akan memperoleh seluruh elemen pada header. Selain itu, querySelector juga memungkinkan kamu mengambil elemen CSS lain berdasarkan class, tag, atau elemen lainnya.
5. Mengambil Elemen dengan querySelectorAll
Kamu juga dapat mengambil elemen yang lebih spesifik dengan method querySelectorAll(). Contoh scriptnya seperti di bawah ini:
Method di atas digunakan untuk menemukan class maupun tag secara bersamaan. Selain itu, kamu juga dapat mencari elemen CSS lain dengan memanfaatkan CSS Selector.
Cara Menambah Elemen HTML dan Menghapusnya
Setelah mengetahui cara mengambil elemen, kamu juga perlu memahami cara menambah dan menghapus elemen HTML. Tanpa berlama-lama, simak penjelasannya di bawah ini.
Baca Juga: Apa Itu NPM (Node Package Manager)? Ini Penjelasan Lengkapnya
1. Cara Menambah Elemen HTML
Kamu bisa menggunakan method CreateElement() untuk membuat atau menambah elemen baru. Sebagai contoh, berikut script yang digunakan untuk membuat elemen ‘div’:
Setelah itu, kamu bisa menambah konten baru pada elemen yang baru dibuat menggunakan method createTextNode() melalui String sebagai parameternya. Berikut contoh scriptnya:
2. Mengganti Elemen HTML
Jika ingin mengganti elemen HTML, kamu dapat menggunakan method replaceChild(). Perhatikan contoh scriptnya di bawah ini:
Dengan script di atas, kamu bisa mengganti elemen (argumen pertama) dengan elemen HTML baru (argumen kedua).
3. Menghapus Elemen HTML
Untuk menghapus elemen HTML, kamu bisa menggunakan method removeChild(). Berikut contoh scriptnya:
4. Menulis Secara Langsung ke HTML Output System
DOM JavaScript memiliki keunikan dimana HTML dan JavaScript dapat digabungkan dalam satu baris kode. Hal ini memungkinkan kamu menulisnya secara langsung ke HTML Output System dengan method write(). Berikut contoh scriptnya:
Selain berisi teks, kamu juga dapat memanfaatkan method ini untuk menginput object seperti ‘Date’. Simak contoh scriptnya di bawah ini.
Baca Juga: Cara Membuat Website Single Page dengan Mudah
Kesimpulan
Sejauh ini kamu tentu sudah paham apa itu DOM mulai dari pengertian hingga cara menggunakannya. Berdasarkan penjelasan di atas, dapat disimpulkan bahwa DOM adalah antarmuka untuk mengubah style halaman website dengan memanipulasi fungsi dan atribut/data. Dengan begitu, website yang awalnya tersusun dari CSS dan HTML statis dapat diubah menjadi halaman yang lebih dinamis dan atraktif.
Terlepas dari itu, bagi kamu yang ingin mengetahui informasi menarik seputar website lainnya, kamu dapat mengeksplor blog Dewaweb. Selain website development, Dewaweb juga memuat banyak artikel tentang optimasi, digital marketing, hingga sistem keamanan website. Yuk, baca artikel Dewaweb lainnya.
