Mengenal Apa itu DOM di Javascript

Salah satu hal yang wajib kamu pahami saat belajar javascript adalah DOM.
Penerapan DOM dalam pembuatan website akan membuat website yang di bangun lebih dinamis dan interaktif.

Apa itu DOM ?

DOM merupakan singkatan dari Document Object Model yang mana 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 yang merupakan standar dari XML dan HTML yang memiliki sifat platform independent. DOM memungkinkan untuk melakukan perubahan struktur, gaya, dan konten dokumen. Selain XML dan HTML DOM juga bisa digunakan untuk dokumen SVG.

Bagaimana Cara Menggunakan DOM ?

Berikut beberapa contoh penggunaan DOM :
1. Menulis kedalam HTML
Untuk menulis keadalam html tanpa mendefenisikan tag mana yang akan di tuliskan kita dapat menggunakan fungsi document.write(). Contoh penggunaannya :

	
document.write("Selamat Datang");
document.write("<h1>Saya sedang mempelajari cara kerja DOM di Javascript</h1>");

2. Mengakses Elemen secara spesifik
Mengakses elemen secara spesifik memungkinkan anda untuk melakukan perubahan pada tag html secara spesifik. Kita dapat menggunakan fungsi-fungsi yang dapat disesuaikan dengan kebutuhan. Berikut beberapa fungsi yang paling sering digunakan dalam melakukan DOM di Javascript.

getElementById() fungsi untuk memilih element berdasarkan id yang telah di definisikan pada tag html.
getElementByName() fungsi untuk memilih element berdasarkan name yang telah di definisikan pada tag html.
getElementByClassName() fungsi untuk memilih element berdasarkan class yang telah di definisikan pada tag html.
getElementByTagName() fungsi untuk memilih element berdasarkan tag name pada html.
querySelector() fungsi untuk memilih element berdasarkan query.
querySelectorAll() fungsi untuk memilih element berdasarkan query secara multiple.

Selain fungsi di atas masi banyak lagi fungsi-fungsi yang lainnya.

3. Membuat Element

Selain melakukan DOM pada element yang sudah ada pada html, DOM juga memungkinkan untuk membuat elemet dan menambahkannya kedalam dokumen. Untuk melakukan aksi ini digunakan fungsi document.createElement(). Contohnya seperti berikut :


p = document.createElement('p');

Contoh di atas akan menghasilkan tag/element paragraf yang didefinisikan kedalam variabel p.

Tuesday, June 14, 2022