Apa Kegunaan DOM? Begini Pengertian, Fungsi, Elemen-elemen, dan Cara Menggunakannya

DOM JavaScript adalah sebuah program antarmuka dengan fungsi utama untuk mengubah tampilan sebuah halaman situs tanpa perlu memuat ulang. Kegunaan DOM ini bisa kamu dapatkan sebab model ini mempunyai kemampuan untuk mengubah tampilan dengan cara melakukan modifikasi dan manipulasi dengan JavaScript.

Kamu dapat menggabungkan HTML dan JavaScript dengan menggunakan DOM, lho. Wah, sepertinya menarik, ya? Yuk simak ulasan selengkapnya langsung di bawah ini!

Apa Itu DOM?

DOM singkatan dari Document Object Model, yang merupakan sebuah interface program. Kegunaan DOM adalah untuk mengubah tampilan sebuah halaman website tanpa perlu memuat ulang. Hal ini memungkinkan sebab DOM bekerja dengan melakukan manipulasi JavaScript.

Jadi begini penjelasannya, pada tingkat paling sederhana, sebuah website tersusun atas HTML dan CSS style yang statis. Saat kamu menggunakan browser untuk mengakses website tersebut, browser akan menampilkan hasil dari DOM. Keberadaan DOM membuat JavaScript dapat mengakses maupun memanipulasi berbagai elemen.

Selanjutnya, JavaScript inilah yang bertugas untuk menciptakan tampilan halaman situs menjadi lebih dinamis. Dengan kata lain, DOM merupakan sebuah dokumen yang menjadi jembatan komunikasi antara bahasa statis dan dinamis pada sebuah website. Dokumen ini dibuat oleh browser dan disediakan untuk masing-masing halaman web.

DOM diatur dalam struktur objek dan mendefinisikan properties & event elemen HTML, metode akses elemen HTML, serta elemen HTML sebagai objek. Di dalam sebuah DOM, HTML merupakan elemen induk yang memiliki anakan Head dan Body. Anakan ini juga memiliki anakan elemen-elemen lainnya, yang disebut sebagai node.

Fungsi DOM

Jadi apa sebenarnya kegunaan DOM? Fungsi utama dari DOM ialah untuk memanipulasi elemen pada halaman website dengan memanfaatkan bahasa pemrograman JavaScript. Jika dijelaskan secara lebih rinci, kira-kira begini fungsi-fungsi DOM:

1. Menambahkan atau Menghapus Elemen

Tampilan pada browser terdiri atas berbagai elemen yang berbeda. Misalnya seperti elemen img pada sebuah elemen body. Dalam elemen img, HTML akan mempunyai anak head dan body. Baru selanjutnya dalam elemen body terdapat elemen img.

Dengan DOM, kamu dapat menghapus elemen tertentu yang tidak diperlukan. Selain itu, kamu juga dapat menambahkan elemen baru pada seperangkat DOM ini.

2. Melakukan Aksi Terhadap Elemen

Selain melakukan modifikasi, kegunaan DOM juga meliputi melakukan aksi pada elemen. Misalnya seperti menekan tombol elemen, menggulir halaman web, dan sebagainya.

3. Memberikan Respon pada Aksi yang Terjadi di Elemen

Kegunaannya dalam melakukan aksi pada sebuah elemen juga diikuti dengan kegunaan lain seperti memberikan respon dari aksi yang terjadi pada elemen. Misalnya menentukan fungsi respon saat sebuah elemen diberikan aksi tombol yang diklik.

4. Mengubah Atribut Elemen

Bukan hanya menambahkan dan mengurangi, modifikasi pada elemen juga meliputi mengubah atributnya. Sebagai contoh, kamu dapat menggunakan DOM untuk mengubah atribut src pada elemen img atau mengubah atribut href yang ada pada elemen a.

Cara Menggunakan DOM

Nah, setelah mengetahui kegunaan DOM, penasaran bukan bagaimana cara menggunakannya? Tanpa disadari sebenarnya penggunaan DOM sudah sering dilakukan sehari-hari, lho. Contohnya seperti membuat fungsi JavaScript untuk menentukan aksi elemen button yang ditekan.

Selain itu, contoh pemakaian DOM lainnya adalah seperti menerapkan animasi pada elemen. Ada beberapa cara untuk menggunakan DOM, mulai dari seleksi elemen, mengubah elemen, menambahkan elemen, dan sebagainya. Untuk mempersingkatnya, mari simak ulasan di bawah ini!

Seleksi Elemen

Untuk melakukan modifikasi elemen, pertama-tama kamu perlu mengambil elemen tersebut terlebih dahulu. Untuk menemukan elemen yang dicari ada beberapa cara yang bisa dilakukan. Adapun beberapa di antaranya adalah sebagai berikut:

• Mengambil dengan ID elemen. Kamu dapat menemukan elemen dengan ID footer-title untuk selanjutnya disimpan pada sebuah variabel.

Contoh scriptnya adalah sebagai berikut:

var title = document.getElementById(footer-title’);

• Mengambil dengan nama tag elemen. Jika elemen yang ingin diambil menggunakan tagar nama tertentu, kamu dapat mencarinya menggunakan nama tagnya. Sebagai contoh tagar di script berikut adalag ink.

Contoh script: var ListItems = documents.getElementsByTagName(‘ink’);

• Mengambil dengan Class elemen. Untuk mendapatkan semua elemen dalam sebuah Class list-items, kamu dapat menggunakan contoh script berikut:

var items = document.getElementsByClassName(‘list-items’);

Mengubah Elemen

Dengan menggunakan JavaScript, kamu dapat melakukan perubahan pada isi konten, struktur, gaya, hingga tampilan elemen HTML. Berikut beberapa metode untuk mengubahnya:

• Mengubah konten HTML. Pertama, kamu dapat mengubah konten HTML dengan properti innerHTML. Untuk melakukan perubahan ini, kamu dapat memilih dua metode: menggunakan kombinasi dengan cara mengambil elemen menggunakan ID atau dengan cara mengambil elemen menggunakantagar nama.

Contoh script untuk kombinasi dengan cara seleksi ID elemen:

document.getElementById(“#header”).innerHTML = “Hi Everyone!”;

Contoh script untuk kombinasi dengan cara seleksi tag elemen:

document.getElementTagName(“div”).innerHTML = “<h2>Hi Everyone!</h2>”

• Mengubah tampilan. Kegunaan DOM yang banyak dicari adalah untuk mengubah tampilan halaman website. Untuk melakukannya, kamu perlu melakukan dua langkah berurutan. Pertama ubah properti style seperti script berikut:

document.getElementById(id).style.property = new style

Jika sudah, lalu ambil elemen tertentu untuk diubah gayanya. Misalnya untuk mengubah gaya border bottom, maka scriptnya menjadi:

document.getElementByTag(“h2”).style.borderBottom = ‘’solid 5px #FFF”;

• Mengubah value dari atribut. Kamu dapat mengubah value dari sebuah atribut elemen. Sebagai contoh, kamu bisa mengubah value atribut img menjadi image.jpg. Adapun contoh scriptnya sebagai berikut:

document.getElementByTag(“img”).src = “image.jpg”;

Menambahkan Elemen

Selain melakukan modifikasi pada elemen, kamu juga bisa menambahkan atau bahkan menghapus elemen yang sudah ada. Begini ulasan cara menambahkan dan menghapus elemen:

• Menambah elemen. Untuk menambahkan elemen baru, kamu dapat menggunakan metode createElement(). Sebagai contoh elemen yang akan dibuat bernama div. Berikut contoh scriptnya:

var div = document.createElement(‘div’);

Dengan script di atas, kamu bisa menciptakan elemen baru bernama div. Berikutnya, kamu hanya perlu mengisi elemen baru dengan berbagai isi konten yang diperlukan.

• Menghapus elemen. Menghilangkan sebuah elemen dapat dilakukan menggunakan metode removeChild(). Adapun contoh scriptnya sebagai berikut:

var elem = document.querySelector(‘#footer);

elem.parentNode.removeChild(elem);

• Mengganti elemen. Selain menambah dan menghapus, kamu juga bisa mengganti elemen yang sudah ada dengan yang baru. Untuk melakukannya, kamu perlu membuat elemen baru dengan script di bawah ini terlebih dahulu:

var div = document.querySelector(‘#div’);

var newDiv =document.createElement(‘div’);

Selanjutnya, kamu bisa mulai mengganti elemen tersebut dengan memasukkan script berikut:

newDiv.innerHTML = “Hi Everyone2”;

div.parentNode.replaceChild(newDiv, div);

Menulis Elemen DOM HTML

Salah satu kelebihan DOM adalah dapat menggabungkan HTML dan JavaScript dalam satu baris kode. Kamu perlu mengimplementasikan metode write() untuk melakukan hal ini. Berikut contoh scriptnya:

Document.write(“<h2>Hi Everyone!</h2><p>This is an example text!</p>”);

Itulah penjelasan tentang kegunaan DOM lengkap dengan pengertian, fungsi, serta cara menggunakannya untuk memodifikasi elemen. Mari kita tarik kesimpulan dari ulasan ini.  Jadi, DOM adalah Document Object Model yang merupakan penghubung komunikasi antara bahasa statis dan dinamis.

Modifikasi dan manipulasi yang dilakukan menggunakan DOM memanfaatkan bahasa pemrograman HTML dan JavaScript. Dengan bantuan DOM, pengguna dapat mengubah tampilan sebuah halaman website dengan mengubah elemen-elemen dari website tersebut. Contohnya seperti mengatur fungsi elemen, mengelola respon aksi, dan sebagainya.

Semoga ulasan tentang kegunaan DOM ini bisa memperkaya pengetahuan kamu seputar website development, ya. Jika saat ini kamu sedang mengembangkan website, pastikan untuk memilih layanan hosting berkualitas untuk mendapatkan performa terbaik.

Kebetulan, IDwebhost menyediakan promo besar-besaran dengan harga paket layanan hosting mulai dari 10 ribuan saja! Yuk coba cek penawarannya sekarang!