lifelong learner — urip iku urup, currently working on accenture.

Mengenal DOM (Document Object Model)

0
Degananda.com -

Jika anda telah belajar mengenai javascript dan html maka tidak asing dengan istilah DOM atau domain object model. Biasannya kalimat yang mengandung dom seperti “1. bagaimana cara mengakses DOM? 2.bagaimana cara memodifikasi object yang terdapat dalam DOM? dan lain sebagainnya”. Lalu sebenarnya apakah DOM itu? silahkan simak ulasan berikut ini.

HTML DOM (Document object model)

Secara garis besar kita dapat mengibaratkan DOM atau suatu object yang memiliki banyak node didalamnya. Perhatikan ilustrasi dibawah ini

DOM akan membawahi banyak sekali node didalamnya. Kita dapat ibaratkan DOM adalah seseorang yang mengatur pasukan perang. Dimana dalam pasukan perang tersebut terdapat tentara, tank, mobil untuk membawa ransum(makanan), tenaga medis dan lain sebagainnya. Melalui DOM inilah(mengkases DOM) seluruh node didalamnya dapat dimodifikasi.

Node – node didalam DOM tersebut dapat tersusun atas berbagai macam elemen misalnya saja text biasa, html syntax (<p>,<div>, <table>, dsb), ataupuna attribute dari suatu elemen (class,id,style,dsb). Untuk dapat mengakses DOM maka diperlukan perantara yakni javascript.

DOM & Node

Suatu DOM merupakan ket satuan yang memilki banyak object didalamnya mulai dari text hingga elemen-elemen html 5 seperti canvas, audio, video, dsb. Object-object ini disebut dengan node. Mengapa dinamakan node atau simpul? karena mereka berhubungan satu dengan lainnya.

Pada contoh diatas node “div” sebagai elemen dari html berhubungan dengan node attribute berupa style dan class. Tidak semua node terhubung. Hanya node-node yang tertentu yang berhubungan. Namun, seluruh node berada dalam naungan yang sama yakni DOM. Setiap perubahan yang dilakukan pada node harus melalui DOM.

DOM & Document

Suatu halaman web dapat kita disebut sebagai sebuah dokumen. index.html adalah satu buah dokumen.  Document adalah bagian dari DOM itu sendiri atau dapat kita sebut bahwa dom adalah salah satu node yang berada dalam DOM. Sehingga DOM Merepresentasikan suatu dokumen / halaman website. Oleh karena itu DOM dapat memanipulasi/memodifikasi isi dari dokumen. Ketika user menuju ke halaman lain maka hal tersebut akan menghasilkan dokumen baru. Dokumen ini dapat ditampilkan dengan berbagai macam cara misalnya :

  • dokumen ditampilkan pada handphone / devices
  • dokumen ditampilkan pada desktop / laptop
  • dokumen ditampilkan dalam bentuk source code , misalnya melalui inspect elemen ataupun melalui perintah curl.

Biasannya pada satu halaman dengan halaman lainnya terdapat elemen-elemen yang sama sehingga isi dari DOM tersebut bisa jadi sama. Ketika kita mengakses salah satu node dalam suatu dom namun node tersebut tidak ada pada dokumen maka browser akan menampilkan error yang disebabkan karena kita mencoba mengakses node/object yang tidak berada dalam dokumen tersebut.

Implementasi

contoh kita memiliki halaman web(dapat kita sebut sebagai dokumen) dengan source code seperti berikut ini.

<p>Apel</p>
<p>Jeruk</p>
<p>Mangga</p>

maka dengan DOM kita dapat mendapatkan ketiga elemen “P” tersebut dengan menggunakan javascript.

var semuaParagraph = document.getElementsByTagName('P');
console.log(semuaParagraph);

kita dapat melihat pada console (log) bahwa ketiga elemen tersebut telah kita akses dengan menggunakan perintah document.getElementByTagName().

Selain membaca(read) kita juga dapat memodifikasi DOM tersebut. Misalkan kita akan mengubah “P” pertama yang awalnya “apel” kita akan ubah nilainya menjadi “banana”.

var semuaParagraph = document.getElementsByTagName('P');
semuaParagraph[0].innerHTML = 'Banana';

hasilnya akan seperti berikut ini