Perbedaan antara Document Object Model (DOM) dan Browser Object Model (BOM)
Terlihat serupa tapi sebenarnya tidak sama. Ternyata ada perbedaan antara document object model dan juga browser object model, lho. Berikut penjelasannya, silahkan disimak ygy :)
Satu hal yang mungkin kalian perhatikan adalah bahwa saya tidak membuat judul dengan narasi perbandingan (menggunakan ‘vs’) tapi dengan penyandingan (menggunakan ‘dan’). Hal itu karena BOM dan DOM bukanlah metode yang berbeda yang dapat kita pilih mana yang ingin dipakai seperti layaknya react vs vue atau laravel vs node.js, melainkan 2 hal saling berkaitan atau bahkan digunakan secara bersamaan.
Ok, mari kita simak pengertian masing-masing ya.
Document Object Model (DOM)
Document Object Model adalah kumpulan dari beberapa object yang mana meliputi struktur ataupun isi dari sebuah dokumen pada suatu website. DOM bisa juga disebut sebagai API yang memiliki beberapa fungsi untuk melakukan manipulasi pada struktur, isi, style, dan sebagainya pada suatu dokumen dalam sebuah website. DOM merepresentasikan dokumen seperti sebuah simpul yang dapat digunakan oleh bahasa pemrograman (biasanya javascript) untuk berinteraksi dengan dokumen pada sebuah website.
Contoh dari simpul pada dokumen bisa dilihat pada gambar di atas. Document berada di paling atas sebagai induk, sementara itu terdapat beberapa chiil di bawahnya. Child tersebut adalah sebuah elemen HTML yang berada di dalam elemen lain (induknya). Dengan bahasa pemrograman javascript, terdapat beberapa cara untuk mengakses elemen DOM, yaitu : menggunakan id, class, atau bahkan tag html itu sendiri.
Browser Object Model (BOM)
Berbeda dengan DOM yang berbasis pada dokumen, BOM adalah sebuah cara bagi bahasa pemrograman untuk melakukan manipulasi pada browser secara langsung. Biasanya yang digunakan adalah window. Beberapa hal yang sering dilakukan adalah mengecek event pada window dengan window.addEventListener atau mengecek lebar atau tinggi dari window untuk selanjutnya dilakukan manipulasi menggunakan window.innerHeight dan window.innerWidth.
Kesimpulan
Baik DOM dan juga BOM bisa digunakan secara bersamaan karena keduanya saling terkait. Jika yang dibutuhkan adalah melakukan perubahan pada dokumen atau element HTML seperti isi konten, struktur, atau style maka konsep DOM yang akan digunakan. Akan tetapi, jika ternyata yang diperlukan adalah manipulasi atau pengambilan informasi pada browser seperti tinggi window, lokasi, history, dll maka konsep BOM yang akan digunakan. :)
Okey, sekian untuk hari ini. Terimakasih sudah membaca :)
