Manipulasi HTML DOM dengan JavaScript

Muhammad Fahmi Irfan 21 November 2016

Bismillah,

Assalamualaikum.wr.wb, bertemu lagi dengan saya, kali ini saya akan membahas tentang manipulasi HTML DOM(Document Object Model) dengan Javascript. Sebelum masuk kepada pembahasan, kita mulai dengan sebuah pertanyaan, “Kenapa menggunakan Javascript?”.

Dalam pengembangan aplikasi berbasis web, kita mengenal HTML(Hyper Text Markup Language) sebagai bahasa yang digunakan untuk membuat tampilan halaman web, kita kenal juga CSS(Cascading Style Sheets) yakni bahasa yang digunakan memberikan style pada dokument html, menggambarkan bagaimana setiap elemen html akan terlihat di layar, seperti warna latar belakang, ukuran, jenis huruf, warna huruf, dsb. Terakhir, kita mengenal Javascript dan PHP yang mana keduanya merupakan bahasa pemrograman yang digunakan pada pengembangan aplikasi web yang membuat halaman web menjadi ”hidup”, dalam artian input-proses-output terjadi disini. Timbul pertanyaan, “Apakah untuk penggunaan bahasa pemrograman kita boleh memilih salahsatunya saja? Php saja atau javascript saja.”. Jawabannya relatif, keduanya memiliki peruntukan yang berbeda.

Javascript adalah bahasa pemrograman web bersifat client-side-programming, artinya kode program dieksekusi, diproses atau dijalankan di sisi client yang dalam hal ini web browser. Javascript lebih digunakan di sisi tampilan dengan membuat halaman web menjadi interaktif, seperti pembuatan animasi, menagani event yang dilakukan user dan berbagai fungsi lainnya

Sedangkan, PHP adalah bahasa pemrograman web bersifat server-side-programming, artinya semua proses atau eksekusi kode php dilakukan di web server, dan client hanya akan menerima hasil(output) dari proses tersebut. PHP digunakan untuk membuat web dinamis yang membutuhkan manajemen data, seperti database, upload file dan masih banyak lagi.

Javascript dapat membuat halaman web menjadi interaktif karena javascript dapat berinteraksi langsung dengan dokumen html, inilah yang kita sebut sebagai “manipulasi HTML DOM” yang akan kita bahas sekarang.

Apa itu DOM?

DOM(Document Object Model) 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 <html>), elemen root terdiri dari elemen <head> dan elemen <body>, elemen <body> boleh jadi terdiri dari elemen <a>, <h1>, <p>, dst. Elemen-elemen pada dokumen html membentuk sebuah object document yang merupakan object dari dokumen html itu sendiri. Dibawah ini adalah representasi HTML DOM dalam model pohon:

Kalau dalam pemrograman OOP(Object Oriented Programing), sebuah object memiliki property dan method, begitu juga elemen pada dokumen html ini memiliki property yaitu nilai pada elemen html yang bisa ditetapkan atau dirubah dan method yakni aksi yang dapat dilakukan pada elemen html. Contoh property yang biasa digunakan ialah innerHTML yang digunakan untuk memperoleh atau merubah konten dari elemen html itu sendiri. Kemudian method, contoh misalnya getElementById(“id”) milik object document yang digunakan untuk mengakses elemen html dalam dokumen html berdasarkan id. Untuk lebih jelasnya ikuti setiap praktik dalam tutorial kali ini.

Baiklah, setelah sedikit teori di awal sebagai pengetahuan, selanjutnya kita masuk ke pembahasan-pembahasan yang lebih practical. Sebelumnya, dibawah ini saya paparkan apa-apa saja yang dapat dilakukan javascript dengan memanipulasi HTML DOM.

Apa yang dapat Javascript lakukan dengan HTML DOM?

Javascript dapat merubah setiap elemen HTML pada halaman web.
Javascript dapat merubah setiap atribut HTML pada halaman web.
Javascript dapat merubah setiap style CSS pada halaman web.
Javascript dapat menghilangkan elemen dan atribut HTML yang ada.
Javascript dapat menambahkan elemen dan atribut HTML baru.
Javascript dapat bereaksi pada setiap event yang ada pada halaman web.
Javascript dapat membuat event baru pada halaman web.

Praktik Manipulasi HTML DOM

Pada bagian ini kita akan praktik langsung mencoba memanipulasi HTML DOM dengan sintaks Javascript. Melalui praktik ini, diharapkan pembaca akan mampu untuk:

Merubah konten dari elemen HTML
Merubah Style CSS dari elemen HTML
Menanggapi event
Menambah atau Menghilangkan elemen HTML

Merubah Konten dari Elemen HTML

Buka text editor.

Tuliskan sintaks html sebagai berikut :

1.	<!DOCTYPE html>
2.	<html>
3.	<head>
4.		<title>latihan DOM</title>
5.	</head>
6.	<body>
7.	
8.	<p id="demo"></p>
9.	
10.	<script>
11.		document.getElementById("demo").innerHTML = "Hello World!";
12.	</script>
13.	
14.	</body>
15.	</html>

Simpan dengan ekstensi .html dan jalankan di browser.
Hasilnya sebagai berikut :

Apa yang dapat dipelajari?

Yup betul, elemen <p> dengan id “demo” yang semula kosong diberikan nilai “Hello World!” dengan menggunakan sintaks document.getElementById("demo").innerHTML = "Hello World!";.

Penjelasan sintaks sebagai berikut :

document adalah object dari dokumen html tersebut.
document mempunyai method getElementById(“id”) yang di gunakan untuk mengakses elemen berdasarkan id.
Sintaks document.getElementById(“demo”) sudah mengacu kepada elemen <p> dengan id “demo”.
innerHTML adalah property yang digunakan untuk memperoleh atau merubah konten dari elemen itu sendiri (kasusnya disini elemen <p> dengan id “demo” atau <p id=”demo”></p>.
Sintaks document.getElementById("demo").innerHTML sudah mengacu kepada konten dari elemen <p> dengan id “demo”.
Sintaks document.getElementById("demo").innerHTML = "Hello World!"; artinya konten dari elemen yang diacu (elemen <p> dengan id “demo”) diisikan nilai “Hello World!”.

Contoh lain:

misalkan elemen <p id=”demo”></p> diberikan nilai/konten sebagai berikut :
```
6.	<body>
7.	
8.	<p id="demo">Selamat Pagi</p>
9.	
10.	<script>
```

Simpan dengan ekstensi .html dan jalankan di browser.
Hasilnya sebagai berikut :

Apa yang dapat dipelajari?

Nilai yang baru yaitu “Hello World” akan menggantikan nilai yang lama yakni “Selamat Pagi”.

Contoh lain lagi:

Misalkan kita akan merubah konten elemen <p id=”demo”>Selamat Pagi</p> dengan nilai baru “Hello World” ketika user menekan tombol. Tuliskan sintaksnya sebagai berikut:

6.	<body>
7.	
8.	<p id="demo">Selamat Pagi</p>
9.	<button onclick="Ganti()">Ganti</button>
10.	<script>
11.	function Ganti() {
12.	    	document.getElementById("demo").innerHTML = "Hello World!";
13.	}
14.	</script>
15.	
16.	</body>

Simpan dengan ekstensi .html dan jalankan di browser.
Hasilnya sebagai berikut :

Memperoleh Konten dari Elemen HTML

Hampir sama dengan merubah konten, yang perlu dilakukan ialah mengakses konten dari elemen yang dimaksud menggunakan property innerHTML.

Misalkan akan memperoleh konten yang diinginkan kemudian menampilkannya. Modifikasi sintaks sebelumnya :

6.	<body>
7.	
8.	<p id="demo">Selamat Pagi</p>
9.	
10.	<script>
11.	var konten=document.getElementById("demo").innerHTML;
12.	document.write('Konten elemen &ltp&gt dengan id "demo" bernilai : '+konten);    
13.	</script>
14.	
15.	</body>

Simpan dengan ekstensi .html dan jalankan di browser.
Hasilnya sebagai berikut :

Apa yang dapat dipelajari?

Nilai/konten dari elemen yakni “Selamat Pagi” dimasukkan ke variabel konten, kemudian nilai dari variabel konten tersebut ditampilkan bersamaan dengan string ‘Konten elemen &ltp&gt dengan id "demo" bernilai : ‘ dengan menggunakan method dari object document yakni write() yang menampilkan nilai dalam string pada halaman html.

Mengakses Element HTML dengan getElementsByTagName(“tag”)

Ohya, selain menggunakan method getElementById(“id”) untuk mengakses elemen HTML, kita juga dapat menggunakan method yang lain, contohnya getElementsByTagName(“Tag”).

Buat project baru dan tuliskan sintaks html sebagai berikut :

1.	<!DOCTYPE html>
2.	<html>
3.	<head>
4.		<title>Latihan DOM</title>
5.	</head>
6.	<body>
7.	
8.	<p>Paragraf 1.</p>
9.	<p>Paragraf 2.</p>
10.	<p>Paragraf 3.</p>
11.	
12.	<p id="demo"></p>
13.	
14.	<script>
15.		var x = document.getElementsByTagName("p");
16.		document.getElementById("demo").innerHTML =
17.		'Paragraf pertama (indeks 0) adalah : ' + x[0].innerHTML;
18.	</script>
19.	
20.	</body>
21.	</html>

Simpan dengan ekstensi .html dan jalankan di browser.
Hasilnya sebagai berikut :

Apa yang dapat dipelajari?

Berbeda dengan getElementById(“id”) yang mengakses elemen html berdasarkan id, method getElementsByTagName(“tag”) ini mengakses elemen html berdasarkan tag. Kita ketahui bahwa id itu bersifat unik, maka dengan menggunakan getElemenById(“id”) kita secara langsung mengacu kepada elemen dengan id tersebut, dalam artian nilai balik dari method ini ialah berupa nilai tunggal yakni elemen dengan id tersebut, sedangkan method getElementsByTagName(“tag”) mengembalikan nilai berupa array mengingat elemen html dengan tag tertentu bisa jadi lebih dari satu, contohnya disini ialah terdapat lebih dari satu elemen dengan tag(lihat sintaks html diatas). Untuk lebih jelasnya kita bedah sintaks berikut :

var x = document.getElementsByTagName("p");
	document.getElementById("demo").innerHTML =
	'Paragraf pertama (indeks 0) adalah : ' + x[0].innerHTML;

Sintaks document.getElementsByTagName(“p”); akan mengembalikan nilai berupa array yang isinya merupakan setiap elemen dengan tag <p>, kurang lebih gambarannya sebagai berikut :

<p>Paragraf 1.</p>	<p>Paragraf 2.</p>	<p>Paragraf 3.</p>	<p id=”demo”></p>
Indeks 0	Indeks 1	Indeks 2	Indeks 3

Array di atas kemudian ditampung di variabel x melalui sintaks var x = document.getElementsByTagName("p");

Untuk mengakses masing-masing elemen kita gunakan indeks seperti yang terlihat pada potongan sintaks diatas x[0].innerHTML. Artinya, kita mengakses array x dengan indeks 0 sehingga kita peroleh elemen <p>Paragraf 1.</p> dan kemudian .innerHTML digunakan untuk mengacu kepada konten dari elemen tersebut yakni “Paragraf 1.”. sehingga string “Paragraf 1.” lah yang ditampilkan bersamaan dengan string “Paragraf pertama (indeks 0) adalah : ” menjadi “Paragraf pertama (indeks 0) adalah : Paragraf 1.”.

Kita telah mempraktikan dua method untuk mengakses elemen html yakni getElementById(“id”) dan getElementsByTagName(“tag”), sebenarnya masih ada method lainnya dengan fungsi serupa diantaranya getElementsByClassName(“class”) dan querySelectorAll(“CSS Selector”). Namun, kita tidak akan membahasnya karena pada dasarnya kedua method diatas sama seperti getElementsByTagName(“tag”) yakni nilai baliknya berupa array, getElementsByClassName(“class”) mengakses elemen tertentu bersadarkan class sedangkan querySelectorAll(“CSS Selector”) berdasarkan CSS Selector. Contoh penggunaannya:

getElementsByClassName(“header”) : mengacu setiap elemen html dengan class=”header”.
querySelectorAll(“p.intro”) : mengacu setiap elemen html dengan tag berkelas class=”intro”.

Aturan penulisan ini terdapat pada CSS, contohnya “p.intro { style di definisikan disini; }”.

Merubah Nilai dari Suatu Atribut

Selain merubah konten elemen, kita juga dapat merubah nilai dari suatu atribut.

Modifikasi code sebelumnya menjadi seperti ini :

6.	<body>
7.	
8.	<p style="font-size:12pt;">Paragraf 1.</p>
9.	<p style="font-size:12pt;">Paragraf 2.</p>
10.	<p style="font-size:12pt;">Paragraf 3.</p>
11.	
12.	<p id="demo"></p>
13.	
14.	<script>
15.		var x = document.getElementsByTagName("p");
16.		document.getElementById("demo").innerHTML =
17.		'Paragraf pertama (indeks 0) adalah: ' + x[0].innerHTML;
18.	
19.		x[0].style="font-size:72pt";
20.	</script>
21.	
22.	</body>

Simpan dengan ekstensi .html dan jalankan di browser.
Hasilnya sebagai berikut :

Apa yang dapat dipelajari?

Kita dapat merubah nilai atribut dari sebuah elemen html. Seperti pada contoh, sintaks x[0].style="font-size:72pt"; akan merubah atribut dari elemen pertama yang sebelumnya di set dengan nilai “font-size:12pt”. Secara umum aturan penulisannya sebagai berikut element.attribute = new value . Jika melihat pada contoh, maka yang menjadi elemen ialah x[0] dan atribut nya adalah style, sehingga ditulis x[0].style (ingat bahwa x[0] mengacu pada elemen yang memiliki konten “Paragraf 1.” atau elemen indeks ke 0 dalam array x). Sintaks tersebut juga dapat ditulis seperti ini

x[0].style.fontSize=”72pt”;

contoh lain misalnya

document.getElementById(“PP”).src=”guantengMaks.jpg”;

atau

document.getElementById(“link_download”).href=”http://www.blablabla/download”.

Menambahkan Event Pada Elemen HTML

Elemen html dapat kita tanam sebuah event, agar mudah memahaminya langsung saja kita coba praktikan.

Yang akan kita lakukan kali ini ialah kita akan memodifikasi code sebelumnya. Jadi, teks paragraf 1 akan kita ubah size nya setelah user mengklik teks “Paragraf 1.” tersebut.

Modifikasi code sebelumnya menjadi seperti ini :

12.	<p id="demo"></p>
13.	
14.	<script>
15.		var x = document.getElementsByTagName("p");
16.		document.getElementById("demo").innerHTML =
17.		'Paragraf pertama (indeks 0) adalah: ' + x[0].innerHTML;
18.	
19.		x[0].onclick=UbahSize;
20.	
21.		function UbahSize(){
22.			x[0].style="font-size:72pt";
23.		}
24.	</script>
25.	
26.	</body>

Simpan dengan ekstensi .html dan jalankan di browser.
Hasilnya sebagai berikut :

Apa yang dapat dipelajari?

Kita menambahkan event kepada x[0] yang mengacu ke elemen dengan konten “paragraf 1” dengan aturan sintaks element.event=nama_fungsi; sebagai berikut “

x[0]	.onclick	=	UbahSize;
Variabel yang mengacu ke elemen	Nama event		Nama fungsi

Menambahkan Event Handler Pada Elemen HTML

Ini adalah cara lain menambahkan event pada elemen html

Modifikasi code sebelumnya menjadi seperti ini :

12.	<p id="demo"></p>
13.	
14.	<script>
15.		var x = document.getElementsByTagName("p");
16.		document.getElementById("demo").innerHTML =
17.		'Paragraf pertama (indeks 0) adalah: ' + x[0].innerHTML;
18.	
19.		x[0].addEventListener("click",UbahSize);
20.	
21.		function UbahSize(){
22.			x[0].style="font-size:72pt";
23.		}
24.	</script>
25.	
26.	</body>

atau

12.	<p id="demo"></p>
13.	
14.	<script>
15.		var x = document.getElementsByTagName("p");
16.		document.getElementById("demo").innerHTML =
17.		'Paragraf pertama (indeks 0) adalah: ' + x[0].innerHTML;
18.	
19.		x[0].addEventListener("click",function(){x[0].style="font-size:72pt";});
20.	</script>
21.	
22.	</body>

Simpan dengan ekstensi .html dan jalankan di browser.
Hasilnya sebagai berikut :

Apa yang dapat dipelajari?

Method addEventListener() memiliki 2 parameter masukan, parameter pertama adalah jenis event handler nya dalam bentuk string, dan parameter kedua adalah fungsi yang akan dieksekusi jika event terjadi.

Menghapus Event Handler dari Element HTML

Selain menambahkan, kita juga dapat menghapus event handler yang telah tertanam pada elemen html.

Modifikasi code sebelumnya menjadi seperti ini :

12.	<p id="demo"></p>
13.	
14.	<script>
15.		var x = document.getElementsByTagName("p");
16.		document.getElementById("demo").innerHTML =
17.		'Paragraf pertama (indeks 0) adalah: ' + x[0].innerHTML;
18.	
19.		x[0].addEventListener("mouseover",UbahKeBiru);
20.		x[0].addEventListener("mouseout",UbahKeDefault);
21.		x[0].addEventListener("click",HapusEventHandler)
22.	
23.		function UbahKeBiru(){
24.			x[0].style.backgroundColor="skyblue";
25.		}
26.	
27.		function UbahKeDefault(){
28.			x[0].style.backgroundColor="white";
29.		}
30.	
31.		function HapusEventHandler(){
32.			x[0].removeEventListener("mouseover",UbahKeBiru);
33.		}
34.	</script>
35.	
36.	</body>

Simpan dengan ekstensi .html dan jalankan di browser.
Hasilnya sebagai berikut :

Ketika teks paragraf 1 telah di klik maka paragraf 1 tidak akan berubah warna lagi ketika di dekatkan.

Apa yang dapat dipelajari?

Jadi kita menambahkan 3 event pada elemen html (dalam kasus ini x[0] yang mengacu kepada elemen pertama), yakni “mouseover” →UbahKeBiru, “mouseout”→UbahKeDefault, dan “click”→HapusEventHandler. Warna background dari elemen pertama akan berubah menjadi biru ketika cursor diarahkan ke paragraf tersebut, sebaliknya, menjadi putih kembali ketika cursor dijauhkan. Namun, ketika paragraf 1 di klik maka fungsi HapusEventHandler() dipanggil, yang mana berisi perintah untuk menggapus event listener “mouseover” sehingga ketika cursor kembali diarahkan ke paragraf 1 tidak akan merubah apa-apa.

Mengakses Elemen di Dalam Elemen

Sebuah elemen bisa memiliki elemen lain didalamnya, contoh:

<body>
<pre>
	<p>
		<h4></h4>
	</p>
	<p></p>
	<p></p>
</pre>
</body>

elemen <body> memiliki elemen <pre> di dalamnya, elemen <pre> sendiri memiliki elemen <p>, dan seterusnya. Nah, bagaimana jika kita ingin mengakses elemen di dalam elemen?

Buat file baru, tuliskan kode seperti dibawah ini :

1.	<!DOCTYPE html>
2.	<html>
3.	<head>
4.		<title>Latihan DOM</title>
5.	</head>
6.	<body>
7.	
8.	<div style="background-color:skyblue;" id="paragraf">
9.		<p>Paragraf 1</p>
10.		<p>Paragraf 2</p>
11.		<p>Paragraf 3</p>
12.	</div>
13.	
14.	<p id="tampil"></p>
15.	
16.	<script>
17.		var paragraf = document.getElementById("paragraf").children[1].innerHTML;
18.		document.getElementById("tampil").innerHTML = paragraf;
19.	</script>
20.	
21.	</body>
22.	</html>

Simpan dengan ekstensi .html dan jalankan di browser.
Hasilnya sebagai berikut :

Apa yang dapat dipelajari?

Kita mempunyai 3 elemen <p> di dalam elemen <div>, kita mau mengakses elemen <p> yang kontennya berupa teks “Paragraf 2”. cara mengaksesnya ialah dengan terlebih dahulu mengacu kepada elemen <div>, kebetulan elemen <div> memiliki id yang dapat kita akses langsung dengan sintaks document.getElementById(“paragraf”). Kemudian setelah kita mengacu elemen <div>, kita acu elemen <p> dengan property childern. children berupa array, sehingga jika digambarkan ialah sebagai berikut :

Paragraf 1	Paragraf 2	Paragraf 3
.children[0]	.children[1]	.children[2]

Karena kita akan mengakses paragraf dua maka kita gunakan .children[1].

Membuat Elemen Baru

kita dapat menambahkan elemen baru pada dokumen html melalui script dengan menggunakan sintaks createElement(“tag”).

Buat file baru, tuliskan kode seperti dibawah ini :

1.	<!DOCTYPE html>
2.	<html>
3.	<head>
4.		<title>Latihan DOM</title>
5.	</head>
6.	<body>
7.	
8.	<h3>Membuat Elemen Baru</h3>
9.	
10.	<div id="div1"></div>
11.	
12.	<script>
13.		var para = document.createElement("p");
14.		var node = document.createTextNode("Ini elemen paragraf baru.");
15.		para.appendChild(node);
16.	
17.		var element = document.getElementById("div1");
18.		element.appendChild(para);
19.	</script>
20.	
21.	</body>
22.	</html>

Simpan dengan ekstensi .html dan jalankan di browser.
Hasilnya sebagai berikut :

Apa yang dapat dipelajari?

Kita membuat elemen paragraf baru dengan sintaks document.createElement("p"); kemudian kita buat text node baru berupa teks “Ini elemen paragraf baru”, text node ini ialah teks yang menjadi konten dari node/elemen. Kemudian sintaks para.appendChild(node); artinya si text node yang baru ini dijadikan children nya si para. Sampai disini kita telah membuat elemen <p> baru lengkap dengan kontennya. Si elemen baru ini belum akan muncul karena si elemen ini belum punya tempat di dokumen html tersebut, oleh karena itu sintaks berikut akan menjadikan si elemen baru sebagai child nya <div> :

var element = document.getElementById("div1");
element.appendChild(para);

Untuk menghapus elemen gunakan sintaks elemen_parent.removeChild(child); dan untuk me replace elemen gunakan sintaks elemen_parent.replaceChild(child_lama,child_baru);.

Gimana? Menarik bukan? Saya rasa cukup segitu dulu yang saya share tentang manipulasi HTML DOM, selebihnya kalian bisa eksplor lagi dari apa-apa yang sudah saya bahas. Maksud dan tujuan saya membuat tutorial ini ialah untuk mengenalkan basic manipulasi HTML DOM sekaligus memberikan gambaran seperti ini loh Javascript, ini loh salah satu kegunaan utamanya, bahasa pemrograman keren yang memungkinkan kita untuk mengotak-ngatik dokumen html secara realtime, oleh karenanya halaman web menjadi interaktif dan menarik. Jadi, jawaban atas pertanyaan “Kenapa menggunakan javascript?”, inilah jawabannya. Semoga tutorial kali ini membantu dan memacu semangat kalian untuk ngulik lebih dalam lagi tentang javascript. Mohon maaf bila ada kesalahan, sekian dan terimakasih. SELAMAT NGODING!!!

Berikut saya lampirkan link untuk mengenal lebih banyak method dan property dalam manipulasi HTML DOM :

http://www.w3schools.com/js/js_htmldom_document.asp

http://www.w3schools.com/js/js_htmldom_navigation.asp