Pengenalan DOM pada JavaScript
Bahasa pemrograman JavaScript dibangun menggunakan pendekatan OOP (Object Oritented Programming). Oleh karena itu saat ingin membuat program menggunakan JavaScript, maka setiap script/source code yang dituliskan (coding) berfokus pada interaksi membangun objek.
Pada saat membangun halaman Web, HTML diperlukan untuk mendefenisikan elemen--disebut dengan tag--yang membentuk struktur dari dokumen Web itu sendiri. Kemudian CSS diperlukan untuk mengontrol tampilan/style dari halaman Web, sedangkan JavaScript diperlukan untuk memberikan interaksi/fungsionalitas agar halaman Web yang dibangun menjadi lebih dinamis.
Agar halaman Web dapat memberikan interaksi atau menjadi dinamis, maka JavaScript harus memodelkan dokumen HTML dari halaman Web tersebut. Proses ini disebut dengan Document Object Model atau disingkat dengan DOM--sebagai Advanced Programming Interface (API)--agar dapat dimanipulasi oleh JavaScript.
A. Cara Menggunakan DOM
Pada JavaScript Objek DOM dibentuk kedalam variabel bernama document, berisi segala sesuatu yang diperlukan untuk memanipulasi dokumen/halaman HTML.
memanipulasi DOM dokumen HTML dapat dilakukan melalui console dari Web Browser dengan instruksi kode berikut ini.
document.write("<h1>Hello World!</h1>");
document.write("<h1>Hi..!</h1>");
Berikut hasil dari eksekusi instruksi kode diatas pada console Web Browser.
Ketika memberikan instruksi document sebagai objek DOM, terlihat berbagai struktur/elemen dokumen HTML, atribut, dan fungsi yang dapat digunakan untuk memanipulasi halaman Web itu sendiri.
B. Mengakses Element Tertentu pada DOM
Variabel objek document digunakan sebagai DOM API untuk mewakili setiap halaman web yang dimuat di browser dan berfungsi sebagai titik masuk ke dalam konten halaman web, yang dapat digambarkan kedalam DOM Tree.
Gambar DOM Tree
Melalui struktur DOM Tree ini, memudahkan mengidentifikasi elemen tertentu dari dokumen HTML yang ingin dimanipulasi, sebagai contoh dari skrip berikut ini.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello World!</title>
</head>
<body>
<h2>Header</h2>
<p>Paragraph</p>
</body>
</html>
Contoh skrip untuk mengakses atau memanipulasi tag dokumen HTML diatas yang dapat dijalankan melalui console Web Browser.
// mengakses dan memanipulasi root element/tag <html>
document.documentElement.style.fontSize = '75%';
// mengakses objek head
document.head;
// mengakses dan merubah warna background objek body
document.body.style.backgroundColor = 'lightblue';
// menghitung julmlah kata pada objek title
document.title.length;
Apabila ingin mengakses elemen HTML yang lebih sepsifik, dapat memanfaatkan fungsi DOM API sebagai berikut.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello World!</title>
</head>
<body>
<h2 id="judul">Header</h2>
<p class="kontent">Paragraph</p>
</body>
<script type="text/javascript">
// memilih elemen dengan id 'judul' sebagai selektor
var judul = document.getElementById('judul');
// merubah/memanipulasi isi judul
judul.innerText = 'Belajar Dasar DOM JavaScript';
// memberikan CSS ke selektor judul
judul.style.color = 'lightblue';
// memilih elemen dengan class 'kontent' sebagai selektor
var konten = document.getElementsByClassName('kontent');
// memberikan CSS ke selektor konten
kontent[0].style.color = 'blue';
</script>
</html>
Contoh lain untuk memanipulasi CSS pada JavaScript dapat menggunakan fungsi seperti document.querySelector, baik untuk merubah isi elemen, menambahkan elemen, menghapus elemen, dsb.
Warning!
We are not responsible for any loss whatsoever due to this site, also if you want to take this article please read terms of use or touch us via contact page.
If there is question, please discuss below. Very welcome and expected to provide corrections, criticisms, and suggestions.
Be the first :D
