Browser Object Model dan Document Object Model Javascript

Pendahuluan Browser Object Model dan Document Object Model

Apabila anda sudah mempelajari bahasa JavaScript. Anda sudah memahami bagaimana membuat program dengan bahasa ini. Lantas, bagaimana JavaScript mempunyai pengaruh terhadap aspek front-end, yaitu halaman web? Dalam modul inilah kita akan menemukan peran dari JavaScript dalam membangun halaman web menjadi interaktif.

Pada materi ini, kita akan mempelajari hal baru, yaitu Browser Object Model (BOM) dan Document Object Model (DOM). BOM dan DOM memiliki kemampuan mengubah laman web menjadi dinamis. Hal ini tidak dapat dicapai hanya dengan menggunakan HTML dan CSS saja. Pada akhir modul ini, Anda diharapkan dapat:

1. Mengetahui peranan BOM dalam halaman web.

2. Mengetahui beragam member dari BOM beserta fungsinya.

3. Mengetahui peranan DOM dalam halaman web.

4. Mengetahui struktur dari DOM Tree dalam halaman web.

5. Memahami cara memanipulasi konten website melalui teknik manipulasi DOM.

Cara JavaScript Mengontrol Website dan Browser?

Setelah membaca materi sebelumnya, maka akan muncul pertanyaan “Bagaimana JavaScript mengontrol sebuah website atau browser?” Jawabannya ada dua, dan keduanya akan kita bahas di modul ini, yakni melalui Browser Object Model (BOM) dan Document Object Model (DOM).

Browser Object Model = Model yang bertujuan untuk mengontrol pencarian atau browser

Cara mengontrol Browser menggunakan BOM itu bagaimana?

Dengan memberikan perintah-perintah khusus ke pencarian atau browser.

Contoh ngasih perintah-perintah khusus ke browser bagaimana?

dari sumber https://sko.dev/referensi/javascript/apa-itu-browser-object-model

Perintah-perintah yang digunakan BOM untuk mengontrol browser (disebut Object dalam BOM) yakni sebagai berikut:

1. window: Ini adalah objek global, dan semua yang lain (termasuk dokumen itu sendiri dengan DOM) berada di dalamnya.

console.log(window.innerHeight); //mendapatkan tinggi jendela

2. navigator: Object ini mewakili browser itu sendiri dan memungkinkan kamu mendapatkan informasi tentangnya.

console.log(navigator.userAgent); //mendapatkan informasi tentang browser

3. screen: Representasi dari layar pengguna, memungkinkan kamu mendapatkan informasi seperti resolusi.

console.log(screen.width); //mendapatkan lebar layar

4. screen: Representasi dari layar pengguna, memungkinkan kamu mendapatkan informasi seperti resolusi.

console.log(location.href); //mendapatkan URL halaman saat ini

5. history: Memberikan akses ke riwayat browser.

history.back(); //mengarahkan browser untuk kembali ke halaman sebelumnya

Dari contoh perintah diatas bisa kita perjelas, untuk memberikan perintah melalui atribut mesti ada method nya:

console.log(); adalah methodnya. Sedangkan, (windows)(screen)(location) adalah attributnya.

Adapun beberapa method lainnya seperti:

alert(); yakni Membuat sebuah pop-up dengan pesan teks yang disediakan.

prompt(); yakni Membuat pop-up dengan formulir input text.

confirm(); Membuat pop-up dengan pilihan ‘OK’ atau ‘Cancel’.

Cara kedua adalah DOM. DOM sama seperti BOM. Perbedaannya adalah kita menggunakan global objek bernama document. Melalui global objek ini, kita bisa menangkap seluruh elemen dalam dokumen HTML guna memanipulasi konten HTML melalui method getElementById(). Method ini akan menangkap elemen berdasarkan value dari atribut id. Sebagai contoh, kita mengubah konten elemen HTML berikut ini.

karena cara menggunakan nya hampir sama dengan BOM. Maka kita bisa memberikan perintah-perintah object DOM sebagai berikut: 

document.getElementById('hello').innerHTML = 'I love you';

Perbedaannya jelas, kalau BOM itu menggunakan method dan diikuti attribut, sedangkan DOM itu menggunakan global objek yakni document diikuti method dan attribut berisi value.

Pada contoh yang kita pelajari di atas merupakan contoh yang sangat sederhana. Kita dapat melakukan lebih banyak hal lainnya, seperti mengubah konten elemen, memberikan event tertentu pada elemen, dan sebagainya.

Melalui contoh di atas, kita telah menggunakan console milik browser untuk menjalankan kode program JavaScript. Tentunya jika kita mengembangkan website tidak menggunakan pendekatan seperti ini. Ada cara lain dalam menulis kode JavaScript, yakni melalui berkas HTML secara langsung.