Perbedaan BOM Dan DOM Pada JavaScript

This post is also available in: English

Hallo apa kabar teman semuanya, semoga kalian semua sehat dan sukses selalu. Kali ini kita akan membahas perbedaan BOM dan DOM sering kali kita gunakan di JavaScript akan tetapi kita tidak tahu perbedaan di antara keduanya.

BOM dan DOM terlihat sama akan tetapi berbeda dari keduanya. Kita bahas perbedaannnya.

https://id.javascript.info/browser-environment

Sebelumnya kamu baca tutorial lainnya di sini:

JavaScript Dasar Part 6 : If Else JavaScript

JavaScript Dasar Part 5 : Operator JavaScript

JavaScript Dasar Part 4 : Tipe Data JavaScript

Browser Object Model (BOM)

BOM merukapakan Browser Objeck Model yaitu objek jendela didukung oleh semua browser yang mewakili jendela browser yang terdiri dari objek navigator, history, screen, location dan document yang merupakan anak dari windows. BOM dapat berfungsi untuk mengecek sebuah event dari windows dengan window.addEventListener dan dapat melakukan manipulasi menggunakan window.innerHeight dan window.innerWidth.

BOM dapat memberikan pernitah khusus pada browser contohnya kita gunakan atribut khusus pada browser, Kamu dapat membuatnya menggunakan broswe. Contohnya seperti di bawah ini:

Tambahkan perintah window.alert(‘Hallo Teman Ngoding’);

Ada beberapa method yang dapat kita gunakan dari BOM di anataranya alert(), prompt(), dan objek console.

Method alert()

Method alert() merupakan salah satu method BOM yang guginakan untuk menampilkan peringatan atau informasi. Contohnya dapat kita gunakan seperti di bawah ini:

window.alert("Hello World!");

atau

alert("Hello World!");

Method prompt()

Method prompt() berfungsi untuk menampilkan dialog browser dan dapat di isi oleh pengguna. Dialog prompt() akan mengembalikan sebuah nilai string dari pengguna ketika melakukan input sting pada dialog prompt(). Contohnya seperti di bawah ini:

let message = prompt('Your Name:');

atau

var name = prompt("Your Name?", "");
document.write("<p>Hello "+ name +"</p>");

Kita dapat memberikan inputdan pada prompt windows selanjutnya string yang telah kita input akan di tampilkan pada browser.

Method console

Method console merupakan sebuah method yang sangat berguna bagi seorang pengembang frontend, karena method console dapat kamu gunakna untuk menghilangkan bug yang ada pada code yang telah di buat. Contoh kode console di bawah ini:

console.log('Pesan kamu');

Ada beberapa method console yang dapat kita gunakan.

Method	Penjelasan
log()	Menampilkan pesan secara umum ke console browser.
info()	Menampilkan pesan yang berisi informasi penting ke console browser.
warn()	Menampilkan pesan yang berisi informasi dalam bentuk peringatan ke console browser.
error()	Menampilkan pesan yang berisi informasi dalam bentuk error ke console browser.

Console.log()

Method ini digunakan untuk menampilkan pesan atau inforamsi ke tab console. Contohnya:

console.log("this is console.log")
console.log(4+9)

Console.warn()

Metode console.warn() memiliki fungsi yang sama dengan console.log() tapi pesan yang muncul adalah berupa warning atau peringatan. Contohnya :

console.warn("this is console.warm")
console.warn(4+9)

Console.error()

Method console.error() juga memiliki fungsi yang sama dengan kedua metode di atas tapi pesan yang muncul adalah berupa error. Contohnya :

console.warn("this is console.error")
console.warn(4+9)

Console.info()

MEthod ini juga fungsinya sama dengan method sebelumnya, yaitu untuk menampilkan pesan. Conothnya:

console.info("this is console.info")
console.info(4+9)

Dan banyak lagi method yang dapat kita gunakan menggunakan javascript.

Kita lanjutkan pada pembahawan DOM.

Document Object Model (DOM)

DOM merupakan sekumpulan fungsi dan atribut/data yang kita manfaatkan untuk membuat program JavaScript yang dapat kita sebut dengan API (Application Programming Interface). DOM dapat digunakan di HTML, XM dan SVG. DOM tidak hanya digunakan untuk pemrograman JavaScript saja akan tetapi dapat digunakan untuk pemrograman yang lainnya juga.

Di dalam objek document, kita akan menapatkan fungsi-fungsi dan atibut yang dapat kita gunakan untuk memanipulasi dokumen HTML.

DOM memiliki struktur dalam bentuk phon dapat kita sebut degan DOMtree.

Coba kamu perhatikan trusktur DOMtree ini, kita akan mengetahui trusktur dari kode HTML yang akan kita manipulasi menggunakan DOM. Contohnya di bawah ini:

document.head;

document.body;

document.title.length;

Masukan kode tersebut pada browser kamu, maka hasilnya akan menjadi seperti ini:

Ketika kita mengakses elemen HTML melalui DOM, kita cukup menambahkan kode document.

Cukup dengan objek document, kita dapat mengakses keseluruhan konten pada HTML yang terdapat root element <html>. Sehingga, jika dicermati kembali di dalamnya terdapat elemen lainnya seperti <head> dan <body>.

Dan kita dapat mengakses elemen HTML lebih spesifik dengan menggunakan beberapa fungsi di bawah ini.

getElementById() fungsi untuk memilih elemen berdasarkan atribut id.
getElementByName() fungsi untuk memilih elemen berdasarkan atribut name.
getElementByClassName() fungsi untuk memilih elemen berdasarkan atribut class.
getElementByTagName() fungsi untuk memilih elemen berdasarkan nama tag.
getElementByTagNameNS() fungsi untuk memilih elemen berdasarkan nama tag.
querySelector() fungsi untuk memilih elemen berdasarkan query.
querySelectorAll() fungsi untuk memilih elemen berdasarkan query.
dan lain-lain.

Pada method di atas ada yang mengembalikan nilai HTML elemen secara tunggal. Selain itu, ada juga yang mengembalikan banyak elemen dari sebuah berkas HTML yang biasa disebut sebagai HTMLCollection. Dikarenakan semua method di atas dimiliki oleh objek document, maka jangan lupa mengawali semua pemanggilan method-method di atas dengan sintaks document.<nama_method>.

Saya berikan contoh cara menggunakan DOM pada browser.

<!DOCTYPE html>
<html>
<head>
    <title>Element HTML</title>
</head>
<body>

    <div id="tutorial"></div>


    <script type="text/javascript">
        var tutorial = document.getElementById("tutorial");

        tutorial.innerText = "Tutorial Javascript";

        tutorial.style.backgroundColor = "gold";
        tutorial.style.padding = "10px";

    </script>

</body>
</html>