Frontend : JAVASCRIPT Bagian 11 – Document Object Model (DOM)

Kali ini penulis akan bahas mengenai DOM. DOM adalah singkatan dari Document Object model, sebuah Interface yang dapat memanipulasi elemen html. Pada model DOM ini, setiap elemen html dipandang sebagai sebuah object. DOM mempermudah pekerjaan Frontend Developer. Berikut beberapa DOM yang dapat teman-teman gunakan :


1. Manipulasi Head dan Body

<!DOCTYPE html>
<html>
<head>
	<link rel="icon" type="image/x-icon" href="img/pbs2.png">
	<title>Frontend : JAVASCRIPT Bagian 11 - DOM</title>
</head>
<body>
<h4>JAVASCRIPT Bagian 11 - DOM</h4>

<!-- Kode Javascript -->
<script type="text/javascript">
	const head = document.head;
	const body = document.body;

	console.log(head);
	console.log(body);
</script>
</body>
</html>


Hasil :


2. Manipulasi Foto

<!DOCTYPE html>
<html>
<head>
	<link rel="icon" type="image/x-icon" href="img/pbs2.png">
	<title>Frontend : JAVASCRIPT Bagian 11 - DOM</title>
</head>
<body>
<h4>JAVASCRIPT Bagian 11 - DOM</h4>
<img src="img/pbs2.png" id="foto" width="250">

<!-- Kode Javascript -->
<script type="text/javascript">
	var x = document.querySelector('#foto');
	x.setAttribute('src', 'img/smkbisa.png');
</script>
</body>
</html>


Hasil :


3. Manipulasi Konten

<!DOCTYPE html>
<html>
<head>
	<link rel="icon" type="image/x-icon" href="img/pbs2.png">
	<title>Frontend : JAVASCRIPT Bagian 11 - DOM</title>
</head>
<body>
<h4>JAVASCRIPT Bagian 11 - DOM</h4>
<p id="teks"></p>

<!-- Kode Javascript -->
<script type="text/javascript">
	var x = document.querySelector('#teks');
	x.innerHTML = "Teks telah dimanipulasi dengan DOM!";
</script>
</body>
</html>


Hasil :


4. Manipulasi Tambah Element

<!DOCTYPE html>
<html>
<head>
	<link rel="icon" type="image/x-icon" href="img/pbs2.png">
	<title>Frontend : JAVASCRIPT Bagian 11 - DOM</title>
</head>
<body>
<h4>JAVASCRIPT Bagian 11 - DOM</h4>

<!-- Kode Javascript -->
<script type="text/javascript">
	var x = document.createElement('h4');
	x.innerHTML = "Element telah ditambahkan melalui DOM!";

	document.body.appendChild(x);
</script>
</body>
</html>

Hasil :

Materi berikutnya adalah materi terakhir Javascript. So, tetap semangat ya teman-teman…

Leave a Reply

Your email address will not be published. Required fields are marked *