DOM merupakan singkatan dari Document Object Model, 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, inilah yang disebut API (Application Programming Interface).
DOM tidak hanya untuk dokumen HTML saja, DOM juga bisa digunakan untuk dokumen XML dan SVG, DOM juga tidak hanya ada di Javascript saja, DOM juga ada pada bahasa pemrograman lain.
DOM adalah model data standar, DOM adalah cara javascript melihat suatu halaman html. DOM adalah sebuah platform dan interface yang memperbolehkan pengaksesan dan perubahan pada konten, struktur, dan style pada sebuah dokumen oleh program dan script. Istilah HTML DOM mengacu kepada dokumen html. Kasusnya disini ialah konten, struktur, dan style pada dokumen html dapat diakses dan dirubah dengan menggunakan sintaks javascript.
Pada model DOM ini, setiap elemen html dipandang sebagai sebuah object. Setiap object bisa terdiri dari object-object lain, sama halnya dengan dokumen html yang terdiri dari elemen root (elemen ), elemen root terdiri dari elemen dan elemen , elemen boleh jadi terdiri dari elemen.
DOM adalah API (Application Programming Interface) yang disediakan web browser kepada programmer. Secara sederhananya, DOM adalah kumpulan aturan atau cara bagi programmer untuk ‘memanipulasi’ apapun yang tampil dalam halaman web. DOM tidak terikat dengan JavaScript dan sepenuhnya bukan bagian dari JavaScript. DOM yang sama bisa juga diakses dengan bahasa client-side lain seperti JScript.
Tag atau element yang ada di dalam HTML diatur di dalam DOM dengan menggunakan JavaScript, kita bisa memanipulasi seluruh tag HTML ini.
Cara Menggunakan DOM
Seperti yang kita sudah diketahui, DOM adalah sebuah objek untuk memodelkan dokumen HTML. Objek DOM di javascript bernama document. Objek ini berisi segala hal yang kita butuhkan untuk memanipulasi HTML.
Jika kita coba ketik document pada console Javascript, maka yang akan tampil adalah kode HTML.
Di dalam objek document, terdapat fungsi-fungsi dan atribut yang bisa kita gunakan untuk memanipulasi dokumen HTML.
Sebagai contoh fungsi document.write() , fungsi ini digunakan untuk menulis sesuatu ke dokumen HTML.
Contoh :
Ketik kode berikut di dalam consoel Javascript :
document.write("Hello World");
document.write("<h2>Saya Sedang Belajar Javascript</h2>");
Hasilnya akan langsung berdampak pada dokumen HTML :
Mengkases Elemen dengan DOM
Objek document adalah model dari dokumen HTML. Objek ini berisi kumpulan fungsi dan atribut berupa objek dari elemen HTML yang bisa digambarkan dalam bentuk pohon seperti ini :
Struktur pohon ini akan memudahkan kita dalam menggunakan elemen tertentu. Kita coba mengakses objek <head> dan <body>.
Coba ketik kode berikut pada Console :
// mengakses objek head document.head; // mengakses objek body document.body; // melihat panakang judul pada objek title document.title.length
Hasilnya :
Beberapa fungsi yang bisa digunakan untuk mengakses elemen yang spesifik :
-
getElementById()fungsi untuk memilih elemen berdasarkan atributid.getElementByName()fungsi untuk memilih elemen berdasarkan atributname.getElementByClassName()fungsi untuk memilih elemen berdasarkan atributclass.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.
Fungsi-fungsi di atas cukup sering digunakan untuk mengakses elemen tertentu.
Contoh :
Kita punya kode HTML seperti ini :
<div id="tutorial"></div>
Maka untuk memilih element tersebut di Javascript, kita bisa gunakan fungsi getElementByI() seperti ini :
// memilih elemen dengan id 'tutorial'
var tutorial = document.getElementById('tutorial');
Variabel tutorial akan menjadi sebuah objek DOM dari elemen yang kita pilih.
Contoh yang lebih lengkap :
<!DOCTYPE html>
<html>
<head>
<title>Memilih Elemen Berdasarkan ID</title>
</head>
<body>
<!-- Elemen div yang akan kita pilih dari JS -->
<div id="tutorial"></div>
<script type="text/javascript">
// mengakses elemen tutorial
var tutorial = document.getElementById("tutorial");
// mengisi teks ke dalam elemen
tutorial.innerText = "Tutorial Javascript";
// memberikan CSS ke elemen
tutorial.style.backgroundColor = "gold";
tutorial.style.padding = "10px";
</script>
</body>
</html>
Hasilnya :
Referensi :
- https://www.petanikode.com/javascript-dom/
- https://www.codepolitan.com/manipulasi-html-dom-dengan-javascript-58307b3fc5bb8-21269
