Pengenalan DOM Javascript – DOM merupakan singkatan dari Document Object Model. Artinya, dokumen (HTML) yang dimodelkan dalam sebuah objek.
Saat membuka sebuah halaman web pada browser, maka file HTML dari web akan dimuat serta ditampilkan pada layar perangkat. Saat proses render file HTML berlangsung, browser akan membuat DOM atau model objek dokumen yang merupakan model berorientsi objek dari struktur logicnya.
Objek dari dokumen ini menyediakan sekumpulan fungsi dan atribut/data yang bisa di manfaatkan dalam membuat program Javascript. Inilah yang disebut API (Application Programming Interface).
DOM tidak hanya untuk dokumen HTML saja, namun juga bisa digunakan untuk dokumen XML dan SVG.. DOM juga tidak hanya ada di Javascript saja, DOM juga ada pada bahasa pemrograman lain.
Cara Menggunakan DOM Javascript
Objek DOM di javascript bernama document. Objek ini berisi segala hal yang kita butuhkan untuk memanipulasi HTML. Di dalam objek document, terdapat fungsi-fungsi dan atribut yang bisa kita gunakan untuk memanipulasi dokumen HTML. Sebagai contoh fungsi documen.write(). Fungsi ini digunakan untuk menulis sesuatu ke dokumen HTML.
Contoh:
Ketik kode berikut di dalam console Javascript.
document.write("Hello World");
document.write("<h2>Saya Sedang Belajar Javascript</h2>");
Hasilnya:
Mengakses Elemen Tertentu dengan DOM pada Javascript
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. Terdapat beberapa fungsi yang bisa digunakan, jika kita ingin mengakses elemen yang spesifik yaitu :
- 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.
Fungsi-fungsi di atas cukup sering digunakan untuk mengakses elemen tertentu.
Contoh:
Silahkan ketik kode berikut di dalam console Javascript.
<!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 = "red";
tutorial.style.padding = "14px";
</script>
</body>
</html>
Pada contoh di atas, kita memilih elemen dengan fungsi document.getElementById(). Lalu membuat objek untuk elemen tersebut. Setelah itu, kita bisa megedit apapun seperti mengubah teks atau style CSS.
Memilih lebih dari satu elemen
Kita bisa memilih kalau ada lebih dari satu elemen, contoh elemen yang dipih berdasarkan nama tag atau atribut class. Maka elemen yang akan terpilih akan menjadi sebuah array. Karena kita memilih sekumpulan elemen. Array tersebut akan berisi objek DOM dari elemen-elemen yang terpilih.
Contoh lagi :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM API Javascript</title>
</head>
<body>
<p class="paragraf">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quo quaerat recusandae qui ullam eaque cumque ea fugit,
debitis commodi ipsum illo dolorum consequatur sed laudantium suscipit quis magni,
maiores in?</p>
<p class="paragraf">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quo quaerat recusandae qui ullam eaque cumque ea fugit,
debitis commodi ipsum illo dolorum consequatur sed laudantium suscipit quis magni,
maiores in?</p>
<p class="paragraf">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quo quaerat recusandae qui ullam eaque cumque ea fugit,
debitis commodi ipsum illo dolorum consequatur sed laudantium suscipit quis magni,
maiores in?</p>
<script>
var paragraf = document.getElementsByClassName("paragraf");
console.log(paragraf);
</script>
</body>
</html>
Pada contoh di atas, kita memiliki tiga buah paragraf dengan nama class paragraf. Lalu kita mencoba memilih ketiga paragraf tersebut melalui javascript dengan method atau fungsi getElementByClassName(). Kemudian, hasilnya kita tampilkan ke dalam console Javascript.
Maka hasilnya:
Variabel paragraf akan berisi sebuah array yang di dalamnya terdapat tiga buah objek DOM dari paragraf. Mari kita coba bereksperimen dengan mengubah warna teks dari paragraf pertama. Paragraf pertama akan barada pada posisi indeks ke-0 di dalam array.
Coba ketikkan perintah berikut di dalam console Javascript:
paragraf[0].style.color = "red"
Maka hasilnya, paragraf pertama akan berwarna merah.
Animasi warna fungsi getElementByClassName()
Sekarang kita akan mencoba membuat sebuah animasi warna.
Ubahlah kode javascript di atas menjadi seperti ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM API Javascript</title>
</head>
<body>
<p class="paragraf">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quo quaerat recusandae qui ullam eaque cumque ea fugit,
debitis commodi ipsum illo dolorum consequatur sed laudantium suscipit quis magni,
maiores in?</p>
<p class="paragraf">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quo quaerat recusandae qui ullam eaque cumque ea fugit,
debitis commodi ipsum illo dolorum consequatur sed laudantium suscipit quis magni,
maiores in?</p>
<p class="paragraf">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quo quaerat recusandae qui ullam eaque cumque ea fugit,
debitis commodi ipsum illo dolorum consequatur sed laudantium suscipit quis magni,
maiores in?</p>
<script>
var paragraf = document.getElementsByClassName("paragraf");
setInterval(function () {
paragraf[0].style.color = "green";
paragraf[1].style.color = "blue";
paragraf[2].style.color = "orange";
setTimeout(function () {
paragraf[0].style.color = "red";
paragraf[1].style.color = "red";
paragraf[2].style.color = "red";
}, 500)
}, 1000);
</script>
</body>
</html>
kita memanfaatkan fungsi setInterval() dan fungsi setTimeOut() untuk menentukan waktu animasinya. Rentang waktu (interval) kita berikan 1000 milidetik atau 1 detik. Sedangkan untuk merubah warnanya menjadi merah, kita berikan waktu 500 milidetik atau 0.5 detik.
Maka hasilnya :
Membuat Elemen dengan DOM API
Pada javascript, DOM juga menyediakan fungsi untuk membuat elemen HTML. Salah satunya adalah fungsi createElement().
Contoh:
document.createElement('p');
Maka, akan tercipta elemen <p> baru. namun tidak akan ditampilkan ke dalam halaman web. Karena kita belum menambahkannya ke dalam body dokumen. Cara menambahkannya ke body dokumen, kita bisa gunakan fungsi append().
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM API Javascript</title>
</head>
<body>
<script>
// membuat element h1
var judul = document.createElement("h1");
// mengisi kontent elemen
judul.textContent = "Praktek Otodidak";
// menambahkan elemen ke dalam tag body
document.body.append(judul);
</script>
</body>
</html>
Menghapus Elemen dengan DOM API
Jika fungsi append() untuk menambahkan elemen, maka untuk menghapusnya kita menggunakan fungsi remove().
Berikut ini contohnya:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM API Javascript</title>
</head>
<body>
<h2 id="judu2">Praktek Otodidak</h2>
<script>
// memilih elemen berdasarkan ID
var h2 = document.getElementById('judu2');
// menghapus elemen yang sudah dipilih
h2.remove();
console.log("Elemen sudah dihapus");
console.log(h2);
</script>
</body>
</html>
Hasilnya :
Pada contoh diatas, maka elemen berhasil dihapus dari halaman web. Namun masih berada di dalam memori.
Contoh Program yang Memanfaatkan DOM pada Javascript
Kita sudah tahu cara mengakses elemen dengan DOM dan kita juga sudah paham cara menambahkan dan menghapus elemen. Sekarang kita akan membuat contoh program sebagai berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM API Javascript</title>
</head>
<body>
<h1>Aplikasi Ubah Warna</h1>
<label>Warna latar: </label>
<input type="color" id="bg-color" />
<br>
<label>Warna teks: </label>
<input type="color" id="text-color" />
<script>
var bgColor = document.getElementById('bg-color');
var txtColor = document.getElementById('text-color');
bgColor.addEventListener("change", (event) => {
document.body.style.backgroundColor = bgColor.value;
});
txtColor.addEventListener("change", (event) => {
document.body.style.color = txtColor.value;
});
</script>
</body>
</html>
Program ini berfungsi untuk mengubah warna latar belakang dari elemen <body> dan mengubah warna teksnya. Kita menggunakan event “change” pada elemen bgColor dan txtColor. Artinya nanti setiap nilai dari elemen ini berubah, kode di dalamnya akan dieksekusi.
Hasilnya:
Begitulah tutorial DOM pada Javascript. Baca juga artikel selanjutnya yaitu Belajar Javascript #12 fungsi math pada javascript
