Javascript DOM (Document Object Model) adalah interface yang memungkinkan developer untuk memanipulasi konten, struktur, dan style situs web.
Pada tingkat paling dasar, situs web terdiri dari dokumen HTML dan CSS. Browser membuat representasi dokumen yang dikenal sebagai Document Object Model (DOM). Dokumen ini memungkinkan Javascript untuk mengakses dan memanipulasi elemen dan style situs web. Model ini dibangun dalam struktur objek dan mendefinisikan:
- Elemen HTML sebagai objek
- Properties dan event elemen HTML
- Method untuk mengakses elemen HTML
Dari keterangan diatas dapat digambarkan seperti berikut :
Cara Mendapatkan Elemen HTML
Berikut beberapa elemen yang dapat kita gunakan :
- 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.
Mari kita coba tuliskan salah satu elemen diatas pada pemrograman Javascript.
Misal kita memiliki kode HTML seperti berikut:
<div id="tutorial"></div>
Maka untuk memilih element tersebut di Javascript, kita bisa gunakan fungsi getElementByI() seperti ini:
var tutorial = document.getElementById('tutorial');
Dan penulisan kode yang lebih lengkap nya seperti berikut:
<!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>
Ok ,sampai sini paham ya? Mari kita lanjut..