DOM (Data Object Model) Pada Jquery

DOM (Data Object Model) Pada Jquery

April 2 , 2015

Salam long weekend broooo , mungkin semuanya punya rencana dan segudang kesibukan buat long weekend ini. Ada yang punya rencana ngehabisin waktu liburannya sama keluarga, bareng temen, bareng pacar(#ups sorry buat jones..hahaha) ,dan pastinya ada juga yang anti mainstream punya semangat menggebu2 buat belajar di long weekend ini.oke Bro Gw salut kalau waktu liburan lu dipake buat belajar asalkan jangan kebalik aja waktu kerja atau sekolah lu buat liburan …hiks…hiks.mungkin tutorial Jquery ini bisa jadi referensi buat orang2 yang anti mainstream di longweekend ini.goodluck bro !!!

Dom Merupakan Kepanjangan Dari Data Object Model ,Yaitu sebuah pemodelan yang digunakan untuk mengakses elemen dokumen HTML .DOM Menyediakan sebuah objek dan property untuk mengakses seluruh elemen dari sebuah dokumen serta menyediakan method untuk mengakses elemen tersebut.DOM merupkan sebuah platform dan bahasa antarmuka natural yang mengijinkan program dan script secara Dinamis mengakses dan merubah konten ,struktur dan style sebuah dokumen.

Terdapat beberapa elemen DOM untuk mendapatkan sebuah nilai ,teks ,maupun dari sebuah elemen.Namun pada tutorial kali ini gue akan membahas tentang fungsi elemen DOM html(), text() dan val()

Fungsi HTML

Fungsi HTML di gunakan untuk mendapatkan seluruh subelemen berserta tag dan teks yang dimilikinya.
Sintaks :
$(‘selector’).html()

<!DOCTYPE html>
<html>
	<head>
		<script src="jquery-1.11.2.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			$(function(){
				var html=$('div:first').html();
				$('div:last').text(html);
			});
		</script>
		<div>
			<p>
				Belajar <span style="color:#f00;">JQuery</span>
			</p>
		</div>
		<div></div>
		<!-- Script Jquery diatas akan menempilkan subelemen div pertama dan menampilkannya secara utuh pada div kedua  -->
	</body>
</html>

Fungsi TEXT

Fungsi text digunakan untuk mendapatkan semua text tanpa tag yang merupakan subelemen , berbeda dengan subelemen diatas.
Sintaks :
$(‘selector’).text()

<!DOCTYPE html>
<html>
	<head>
		<script src="jquery-1.11.2.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			$(function(){
				var teks=$('div:first').text();
				$('div:last').text(teks);
			});
		</script>
		<div>
			<p>
				Belajar <span style="color:#f00;">JQuery</span>
			</p>
		</div>
		<div></div>
		<!-- Script Jquery diatas digunakan untuk mendapatkan teks pada div#pertama .Kemudian teks tersebut disisipkan ke dalam div kedua   -->
	</body>
</html>

Fungsi Val

Digunakan Untuk mendapatkan nilai input .fungsi ini tidak bisa digunakan pada elemen selain elemen form (input,select, radio dll)
Sintaks:
$(‘selector-input’).val()

<!DOCTYPE html>
<html>
	<head>
		<script src="jquery-1.11.2.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			$(function(){
				var value=$('input').val();
				$('#result').text(value);
			});
		</script>
			<label>Name</label>
			<input type="text" id="name" value="Belajar Jquery">
			<div id="result"></div>
		<!-- Script Jquery diatas $('input').val() digunakan untuk mendapatkan nilai yang dimiliki oleh elemen input.kemudian nilai tersebut disisipkan kedalam div#result  -->
	</body>
</html>

Selamat Ketik !!! 😉