Scribd
Unggah
58 tayangan

Javascript DOM

DOM adalah representasi objek dari halaman web yang dapat diakses dan dimanipulasi oleh JavaScript. DOM memungkinkan pengaksesan dan modifikasi elemen HTML secara dinamis, seperti mengubah teks, menambahkan atau menghapus elemen, dan mendengarkan event pengguna.

Diunggah oleh

Diqie
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
58 tayangan

Javascript DOM

DOM adalah representasi objek dari halaman web yang dapat diakses dan dimanipulasi oleh JavaScript. DOM memungkinkan pengaksesan dan modifikasi elemen HTML secara dinamis, seperti mengubah teks, menambahkan atau menghapus elemen, dan mendengarkan event pengguna.

Diunggah oleh

Diqie
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 15

DOM ( Document Object Model )

• DOM adalah representasi javascript


dari sebuah halaman web

• ini adalah jendela javascript mu untuk


masuk kedalam kontent dari halaman
web

• ini hanya sekelompok object yang kamu


bisa berinteraksi dengan javascript

• DOM bisa diakses dengan keyword


‘Document’
Mengakses elemen yang spesifik
• getElementById()
• getElementByName()
• getElementByClassName()
• querySelector()
• querySelectorAll()
Mengakses elemen yang spesifik
Mengakses elemen yang spesifik
Mengakses elemen berdasarkan nama id nya
document.getElementById( nama ID)

Mengakses beberapa elemen berdasarkan nama class nya


document.getElementsByClassName( nama Class)

Mengakses elemen menggunakan Selector css


document.querySelector( selector Css )

Mengakses beberapa elemen menggunakan Selector css


document.querySelectorAll( selector Css )
Mengakses elemen yang spesifik

document.getElementById(“header”);
document.getElementById(“input”)
document.querySelectorAll(“iniSpan”)
Seperti di css, Dengan kita dapat memilih
elemen, maka kita juga dapat merubah /
format elemen tersebut.
Menampilkan menggunakan InnerText VS innerHTML
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>Document</title> <title>Document</title>
</head> </head>
<body> <body>
<h1 id="judul"><i>Ini Judul</i></h1> <h1 id="judul"><i>Ini Judul</i></h1>

<script> <script>
var tekJudul = document.getElementById("judul"); var tekJudul = document.getElementById("judul");
console.log(tekJudul.innerText); console.log(tekJudul.innerHTML);
</script> </script>
</body> </body>
</html> </html>
Contoh Properti yang bisa di format
dalam elemen

InnerText = mendapatkan text saja

Inner HTML = mendapatkan text beserta


kode html nya
Merubah Text menggunakan InnerText VS innerHTML
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>Document</title> <title>Document</title>
</head> </head>
<body> <body>
<h1 id="judul"><i>Ini Judul</i></h1> <h1 id="judul"><i>Ini Judul</i></h1>

<script> <script>
var tekJudul = document.getElementById("judul"); var tekJudul = document.getElementById("judul");
tekJudul.innerText = "<i>Judul Dirubah</i>"; tekJudul.innerHTML = "<i>Judul Dirubah</i>";
</script> </script>
</body> </body>
</html> </html>
Praktek!!!
<!DOCTYPE html>
<html> 1. Tanpa Menyentuh program HTML nya,
<head> copas program tersebut dan buatlah file
</head> script.js
<body>

<h1> Kegiatan Hari Ini</h1>


2. Dapatkan /akses elemen menggunakan
<ul> keyword di slide nomor 3
<li class="done">Mandi</li>
<li>Sarapan</li>
<li class="done">Sekolah</li> Elemen yang harus didapatkan / akses :
<li class="done">Main</li>
<li>Olahraga</li>
• elemen dengan class done
• button dengan id reset
</ul>
• button dengan atribut type=”submit”
<button id="reset" type="reset"> Hapus List </button>
<button type="submit"> Tambah Kegiatan </button>

</body>
</html>
Javascript Event
• Javascript Event
Adalah sesuatu yang
terjadi pada element

• Dengan ini kita bisa


membuat program js,
hanya pada saat
kejadian tertentu
pada element
Syntax Basic JS Event

Contoh
Syntax Basic JS Event
Event Description
onChange Event jika sebuah element html di rubah nilainya
onClick Event jika sebuah element html di click

onMouseOver Event jika sebuah element html di letakan di cursor


mouse
onmouseout Event jika cursor mouse meninggalkan element HTML
onkeydown Event jika terjadi pengetikan di keyboard
onload Event jika element atau halaman selesai di load
Syntax

Contoh
Praktek
<html lang="en">
<head></head>
Masih di file yang sama, tugasnya :
<body> 1. Dapatkan / akses, elemen dengan id:
<h1 id="judul">Ini Judul</h1>
<h2 id="subjudul">Ini Subjudul</h2> 1. inputKomentar
<div id="post"> 2. btnKomentar
<p class="content">ini Kontent 1</p> 3. divKomentar
<p class="content">ini Konten 2</p>

<p class="content">Ini Konten 3</p> 2. Buatlah Event yang pada saat button
</div>
komentar ditekan,
<h2>Komentar</h2>

<div id=”divKomentar”></div> 3. merubah paragraf konten 1 menjadi


<input type="text" id="inputKomentar" /> paragraf 1 ketika button di click
<button id="btnKomentar">Kirim</button>

<script src="script.js"></script>
</body>
</html>

Anda mungkin juga menyukai